innerHTML ile Dinamik Olarak İçerik Eklemek

15 / Şubat / 2008 İsa Engiz    javascript     javascript 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 yazıyı beğendiyseniz, paylaşabilirsiniz: