innerHTML ile Dinamik Olarak İçerik Eklemek

15 / Şubat / 2008 Author

İsa Engiz

javascript Tags

javascript Yorumlar

2 Yorum Yapilmis.

Yarattığımız dokümanlara dinamik olarak içerik eklemek istediğimizde HTML-DOM metodları ile bunu yapmak zaman alıcı olabilir. Klasik HTML-DOM, createElement(), appendChild() metodlarını kullanarak dokümana html etiketleri eklememize izin verir ancak bu yöntem oldukça zahmetlidir. İşte burada imdadımıza innerHTML() metodu yetişir.

innerHTML() metodu ile dokumanlara javascript yardımıyla dinamik olarak kod ekleyebiliriz, hemde istediğimiz yerine. innerHTML() kullanarak yapacağımız basit bir deneme uygulamasına bu sayfadan bakabilirsiniz.

Bu uygulama için örnek dosyayı buradan indirebilirsiniz.

Aslında yaptığımız uygulama oldukça basit, tüm işi bir javascript fonksiyonu yapıyor. Gerisi ise CSS ve biraz HTML.

İlk önce Dokümanda önceden belirlenen içeriğin geleceği yeri belirtiyoruz:

<div id="iletisim"></div>
<div id="hakkimizda"></div>

Sonra Bağlantı verdiğimiz yere tıklandığında çağrılan bir fonksiyon ekliyoruz:

<a href="#" onclick="goster(1)">İletişim</a>

Bu fonksiyonun yaptığı iş, elemente tıklandığında javascript dosyasından goster() fonksiyonunu çağırması. Extra olarak çağırırken fonksiyona da bir değer yolluyor.

goster() fonksiyonu ise şu şekilde:

function goster(baglanti)
{
    if (baglanti == 1)
    {
        document.getElementById("iletisim").innerHTML = formyazi;
        document.getElementById("iletisim").
style.backgroundColor="#F2E6B6";
    }
    else if (baglanti == 2)
    {
        document.getElementById("hakkimizda").innerHTML = yazi;
        document.getElementById("hakkimizda").
style.backgroundColor="#F2E6B6";
    }
}

html dokümanından “iletisim” id’sine sahip elemanın içeriğini “formyazi” değişkeni ile değiştiriyoruz. (Bunu yaparken extradan daha “güzel” gözükmesi için aynı elemanın backroundColor özelliğini de dinamik olarak değiştiriyoruz. )

İşte bu kadar. Aynı şekilde içeriği silmek için yaptığımız işlemi geri alıyoruz, kapat() fonksiyonunda şu kodu yazıyoruz:

document.getElementById("iletisim").innerHTML = "";

İnnerHTML() kullanarak bu şekilde dinamik olarak dokümana kod ekleyebiliyoruz. Üstelik bu metod, klasik metoda göre daha hızlı, buradan karşılaştırma sonuçlarına bakabilirsiniz. Burada dikkat etmemiz gerekn nokta ise innerHTML() metodu ile sayfaya eklenecek kodun içerisinde “\n” karakteri olmaması. Yani yazarken “enter” karakteri kullanılmamalı, tek satır halinde olmalı.

- Bu blogda yer alan yazıları RSS ile takip edebilirsiniz. RSS aboneliği için tıklayın.

- Ya da bu blogda yer alan bütün yazıları içindekiler sayfasında görüntüleyebilirsiniz. Tıklayın!

innerHTML ile Dinamik Olarak İçerik Eklemek yazısına 2 Yorum yapılmış.

OGAN 28 Nisan 2010, 08:34
Peki bir htmlin içindeki yazıyı nasıl alırız?
gokhan 21 Mayıs 2010, 11:53
güzel bir anlatım yapmışsın.. devamını bekleriz..
kolay gelsin

Arama

E-Posta Aboneliği

RSS Aboneliği

En Çok Yorumlanan Yazılar

Etiketler

404 ajax apache arama butonu as astrofizik açık kaynak banner blogger blogger/blogspot Blogger / Blogspot blogspot case chmod css date dosya yükleme editör etiket etkinlik favicon featured form ftp galeri Genel gimp hata sayfası header htaccess htpasswd ilişkisel veritabanı index innodb javascript join JQuery kategori koodla linux mysql opacity php resim url

Son Yorumlar

Murat: Güzel bir teknik, şu ana kadar sınırsız alt kategori lazım olmadı ama olmayacağı anlamına gelmiyor
iilyas: Bu kodlar çalışmıyor arkadaşım. Localde olduğu içinmi acaba ?
iilyas: Arkadaşım çok teşekkür ediyorum. Harika anlatmışsın ajaxla çalışmalara başlamak lazım estetik açısından.....
Nuri: bende bu şekilde bir çalışma yaptım ancak bir sorunum var ne yaptıysam url den index.php bölümünü kaldıramadım....
Kemal: Makale için çok teşekkürler, resimleri div tagları ile yapabilirmiyiz. Bu arada imagelara link verirsek daha...

KOODLA | BLOG