JavaScript Html DOM innerHtml Kullanımı

JavaScript ile Html DOM üzerindeki bir öğenin içeriğini Html kodları ile birlikte alabilir veya seçtiğimiz Html öğesinin içerisine Html kodları ekleyebiliriz. Bunun için JavaScript’deki innerHtml özelliğini kullanıyoruz.

 ⇒  Örneğin id’si box olan bir div etiketi oluşturalım.

 ⇒  Div etiketinin içerisine de birkaç Html kodu yazalım.

 ⇒  Son olarak innerHtml ile div etiketinin içerisindeki Html kodlarını almaya çalışalım.

 Çıktısı :  

Gördüğünüz gibi innerHtml ile div etiketinin içerisindeki tüm Html kodlarını alabildik.

 ⇒  Şimdi de bir div etiketi oluşturup innerHtml ile içerisine Html kodları eklemeye çalışalım.

 Çıktısı :  

Gördüğünüz gibi innerHtml ile div etiketinin içerisine istediğimiz Html kodlarını yazabildik.

Html öğelerine erişim metodları hakkında detaylı bilgi için şu yazılarımı okuyabilirsiniz.

JavaScript Html DOM Erişim Yöntemleri – 1

JavaScript Html DOM Erişim Yöntemleri – 2

Konunun daha iyi anlaşılabilmesi için uygulamalı bir örnek daha yapalım.

Örneğimizde bir p etiketi tanımlayalım ve 2 adet buton oluşturalım.

 ⇒  “Html() – Get” butonuna tıkladığımızda p etiketinin içerisindeki Html kodlarını alert mesajı ile gösterelim.

 ⇒  “Html() – Set” butonuna tıkladığımızda ise p etiketinin içerisine Html kodları ekleyelim.

Css Kodları

JavaScript Kodları

Aşağıdaki uygulamada butonlara tıklayarak p etiketi üzerindeki değişimleri inceleyebilirsiniz.

 ⇒  JavaScript innerHtml özelliği IE ve tüm modern tarayıcılar tarafından desteklenir.

Umarım “JavaScript Html DOM innerHtml Kullanımı” başlıklı yazım sizin için faydalı olmuştur.

Şu yazılar da ilginizi çekebilir.

jQuery text(), html(), val() Metodları ve Kullanımları

Yeni bir yazımda görüşmek üzere.

Yorum Yazın

650+ ABONE ARASINA KATIL

Adını ve E-Posta adresini yazarak Html, Css, Javascript, Jquery, Bootstrap, Web Tasarım, C#, Bilgisayar, Telefon, Android, Veri Güvenliği ve daha birçok alanda ders anlatımlarından ve uygulamalı örneklerden anında haberdar olabilirsin.

Abone olduğunuz için teşekkürler.

Birşeyler yanlış gitti.