Merhaba bu yazımda Javascript ile HTML Elementi Oluşturma konusuna değineceğiz.

Bu başlığı okuduğunuzda size çok mantıklı gelen bir durum olmadığını tahmin edebiliyorum HTML ile element oluşturmak varken neden Javascript ile oluşturalım ? Aslında haklısınız HTML ile oluşturmak daha mantıklı ve daha az kod yükü gerektiriyor ama varsayalım ki bir Javascript uygulaması geliştirdiniz ve bunu GitHub üzerinde paylaşacaksınız ve uygulamanın çalışması için sizin hazırlamış olduğunuz tasarım kullanılmalı. Uygulamanızı kullanacak kişilerden bu HTML kodunu internet sitelerini eklemesini istemeniz çok doğru bir karar olmayacaktır.

Bu yüzden bu işlemleri Javascript ile yapmamız daha doğru olacaktır. Bu işlemleri yapmak için HTML dosyanızda html etiketi, head etiketi, body etiketi olsa yeter ekstra bir şey eklemeye gerek yok.

Bu işlem için kullanmamız gereken üç adet javascript fonksiyonu var. Bunlar,

  • createElement()
  • setAttribute()
  • appendChild()

createElement()

createElement() fonksiyonu bir element oluşturmamız için gereklidir ama sadece createElement kullanmak yeterli değil şimdi basit bir şekilde nasıl div oluşturacağımızı göstereyim.

var yenidiv = document.createElement(“DIV”);

şeklinde basit bir kullanımı vardır bunu bir değişken içine atamamız ileri ki kullanımlar için işimizi kolaylaştıracaktır.

setAttribute()

setAttribute() fonksiyonu oluşturacağımız yeni html elementine id, class gibi özellikler vermemizi sağlar. Bunun da kullanımı basittir.

yenidiv.setAttribute(“class”,”class_adi”)

setAttribute() fonksiyonu iki adet parametre alır. Birincisi ne özelliği ekleneceği ikincisi ise bu özelliğin hangi değere eşit olacağıdır. Yani yukarıda verdiğimiz elementi oluşturduğumuz zaman HTML kodlarımızda şu şekilde gözükecektir.

<div class=”class_adi”></div>

arka arkaya bir kaç kez setAttribute() fonksiyonu kullanılarak farklı farklı özellikler oluşturlacak HTML elementine ve ya zaten olan bir HTML elementine eklenebilir.

appendChild()

appendChild() fonksiyonu ise oluşturacağımız element hangi HTML elementinin içinde olacağını temsil eder. Bizim tasarım kısmında sadece HTML kodlarında ekstra bir tasarımla uğraşmadığımız için body elementinin içine oluşturacağımız DIV elementini ekleyeceğiz.

document.body.appendChild(yenidiv);

şeklinde kullanırız appendChild() fonksiyonunun tek bir parametresi vardır buda oluşturulacak elementtir.

Sonuç olarak HTML kodlarımız şu hale gelecektir.

<body>

<div class=”class_adi”></div>

</body>

Eğer oluşturduğumuz Elementin içine yazı eklemek istiyorsak. innerText özelliğini kullanmamız gerekecek. Bunu da şöyle yapabiliriz.

yenidiv.innerText = “Aydın Can Altun”

yazarsak div oluşturulduktan sonra içine Aydın Can Altun yazacaktır.

Bu konu hakkında daha detaylı bilgiler öğrenmek isterseniz buraya tıklamanız yeterli olacaktır. Yazımı beğendiyseniz ve Javascript ile alakalı yazdığım diğer yazılarımı incelemek isterseniz buraya tıklayınız.