JavaScript HTML Nesnesi Oluşturma

JavaScript programlama dili kullanılarak buton oluşturma, tablo oluşturma, div oluşturma, çarpım tablosu javascript örnekleri ve kodları yer alıyor.

HTML elemanlarını kendimiz HTML ile yazabileceğimiz gibi JavaScript ile oluşturabilir ve sayfaya ekleyebiliriz.

JavaScript HTML nesneleri ile DOM olarak adlandırılan nesne modelini kullanarak işlem yapar.

JavaScript Dersleri bölümünde sayfa içerisinde bulunan elemanlara DOM nesnesi olan document ile erişmiştik.

HTML nesnesi oluşturmak için document nesnesine ait createElement metodu kullanılır.

Oluşturulan eleman bir JavaScript nesnesidir.

Elemana ait özellikleri (value, id vb.) eklemek için JavaScript Nesneler yazımdaki gibi özellik ve alması gereken değer yazılır.

Buton oluşturulduktan ve özellik değerleri atadıktan sonra appendChild, insertBefore gibi metotlar kullanılarak sayfaya eklenir.

<script>
"use strict";
  var buton = document.createElement("button");
  buton.innerHTML = "Tıkla";

  document.body.appendChild(buton);
</script>

JavaScript ile oluşturmuş olduğumuz HTML nesnelerine çeşitli olaylar atayabiliriz.

<script>
"use strict";
  var buton = document.createElement("button");
  buton.innerHTML = "Tıkla";
  buton.onclick = function(){
    alert("Merhaba")
  }

  document.body.appendChild(buton);
</script>

JavaScript ile div oluşturma, buton oluşturma işlemine benzer.

<script>
"use strict";
  var bolum = document.createElement("div");
  bolum.innerHTML = "Merhaba JavaScript";
  
  document.body.appendChild(bolum);
</script>

Burada içerik değerini atamak için innerHTML kullandık createTextNode metodunu da kullanabiliriz.

<script>
"use strict";
  var bolum = document.createElement("div");
  var icerik = document.createTextNode("Merhaba JavaScript")
  bolum.appendChild(icerik);

  document.body.appendChild(bolum);
</script>

Daha fazla kod daha fazla karışıklık olduğundan ilk yöntem daha iyi görünüyor.

JavaScript ile tablo oluşturma işlemi buton ve div oluşturmaya benzer, ancak sütun ve satır oluşturmak biraz daha karışıktır.

<script>
"use strict";
  var tablo = document.createElement("table");
  tablo.border = "1";

  var satir = document.createElement("tr");
  var sutun = document.createElement("td");
  sutun.innerHTML = "İçerik";

  satir.appendChild(sutun);
  tablo.appendChild(satir);

  document.body.appendChild(tablo);
</script>

Örnek ilk olarak tablo oluşturuldu daha sonra satır ve sütun oluşturuldu. Sütuna içerik eklendi ve daha sonra sütun, satıra eklendi. Satır ise tabloya eklendi.

Sadece bir satır ve sütun oluşturmak için bu kadar kod yazıldı. 🙂

Bu işlemi döngüler ile daha az kod yazarak yapabiliriz.

JavaScript çarpım tablosu

<script>
  var tablo = document.createElement("table");
  tablo.border = "1";
  tablo.cellPadding = "5"

  for (var i = 1; i < 10; i++) {
    var satir = document.createElement("tr");
    
    for (var j = 1; j < 10; j++) {
      var sutun = document.createElement("td");
      sutun.innerHTML = i + "*" + j + " = " + i * j;
      satir.appendChild(sutun);
    }
    
    tablo.appendChild(satir);
  }

  document.body.appendChild(tablo);
</script>

Örnekte JavaScript kullanarak çarpım tablosu yapılmıştır.

Hayırlı günler dilerim.