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.
JavaScript innerHtml Kullanımı
⇒ Ö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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<div id="box"> <p> <b>Merhaba Dunya!</b> </p> </div> <script> let item = document.querySelector("#box").innerHTML; console.log(item); </script> |
Çıktısı :
|
1 2 3 4 5 |
<p> <b>Merhaba Dunya!</b> </p> |
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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<div id="box"></div> <script> let div = document.querySelector("#box"); div.innerHTML = "<ul><li>Home</li><li>About</li><li>Contact</li><ul>"; console.log(div); </script> |
Çıktısı :
|
1 2 3 4 5 6 7 8 9 |
<div id="box"> <ul> <li>Home</li> <li>About</li> <li>Contact</li> </ul> </div> |
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.
Html Kodları
|
1 2 3 4 5 6 |
<button id="html-get">Html() - Get</button> <button id="html-set">Html() - Set</button> <p>Lorem <b>ipsum</b> dolor <i>sit</i> amet.</p> |
Css Kodları
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
<style> body { margin: 20px; font-size: 18px; } button { width: 110px; padding: 10px; margin-right: 12px; margin-bottom: 12px; background-color: tomato; color: #fff; border: none; cursor: pointer; font-size: 16px; } p { font-size: 22px; } </style> |
JavaScript Kodları
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<script> document.querySelector("#html-get").addEventListener("click", function () { let html = document.querySelector("p").innerHTML; alert(html); }); document.querySelector("#html-set").addEventListener("click", function () { document.querySelector("p").innerHTML = "<h2><i>JavaScript</i></h2>"; }); </script> |
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.
