JAVASCRIPT ILE HTML DEĞIŞTIRME

innerHTML()

Javascript ile herhangi bir eleman içindeki HTML yapısını değiştirmek için innerHTML özelliği kullanılır.  Örneğin "kutu" id'li bir div içindeki html yapısı aşağıdaki gibi değiştirilebilir.

document.getElementById("kutu").innerHTML="<h1>yeni yazı</h1>";

Yukarıdaki kod çalıştığında div içersinde  h1 etiketleri arasında "yeni yazı" yazacaktır. Dolayısı ile yazı, ekranda h1 başlık stilinde görünecektir. Mevcut html içeriği bozmadan yeni bir içerik eklemek için += operatörü kullanabilriiz.

<div id="kutu"> 
     <h1> yeni yazı </h1>
</div>

<script>
document.getElementById("kutu").innerHTML+="<p>alt paragraf</p>";
</script>

kutu id'li div içeriği bozulmadan <p> etiketi eklenmiş olur.

<div id="kutu"> 
    <h1> yeni yazı </h1>
    <p> alt paragraf </p>
</div>