Bu yazımda JavaScript Html DOM metodlarından olan createElement() ve createTextNode() metodlarının ne işe yaradıklarını ve nasıl kullanıldıklarını anlatacağım.
Html DOM createElement() Metodu
createElement() metodu ile istediğimiz Html etiketlerini oluşturabiliriz. Yapmamız gereken tek şey bu metodun içerisine string olarak etiket ismini yazmak.
Örneğin bir button etiketi oluşturmak istiyorsak şu kodu yazıyoruz:
|
1 2 3 |
document.createElement("button"); |
Bu kod bize şu Html etiketini oluşturur:
|
1 2 3 |
<button></button> |
Yada bir ul etiketi oluşturmak istiyorsak şu kodu yazıyoruz:
|
1 2 3 |
document.createElement("ul"); |
Bu kod bize şu Html etiketini oluşturur:
|
1 2 3 |
<ul></ul> |
⇒ createElement() metodu IE ve tüm modern tarayıcılar tarafından desteklenir.
createElement() metodunun kullanımı bu şekilde. Şimdi de createTextNode() metodunun kullanımını inceleyelim. Daha sonra da iki metodun birlikte kullanımına bakalım.
Html DOM createTextNode() Metodu
createTextNode() metodu ile istediğimiz metinleri oluşturabiliriz. Yapmamız gereken tek şey bu metodun içerisine istediğimiz metni yazmak.
Örneğin “Hello World” metnini createTextNode() metodu ile oluşturalım.
|
1 2 3 |
document.createTextNode("Hello World"); |
⇒ createTextNode() metodu IE ve tüm modern tarayıcılar tarafından desteklenir.
Konunun daha iyi anlaşılması için bu 2 metodu birlikte kullanarak küçük bir uygulama yapalım.
Özetle uygulamamız şu şekilde olacak:
⇒ Tüm işlemler butonun tıklanma olayında gerçekleşecek. Butona tıklandığında;
⇒ createElement() metodu ile bir ul etiketi oluşturacağız.
⇒ Oluşturduğumuz bu ul etiketinin içerisine eklemek için 5 tane li etiketi oluşturacağız.
⇒ Her li etiketinin içerisine eklemek için createTextNode() metodu ile metinler oluşturacağız.
⇒ En sonunda ise oluşturduğumuz bu ul li kodunu Html belgemizdeki div etiketinin içerisine ekleyeceğiz.
Html Kodları
|
1 2 3 4 5 6 7 8 |
<div id="menu"> <!-- Buraya ul li kodları eklenecek --> </div> <div> <button id="btn">Ekle</button> </div> |
JavaScript Kodları
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
<script> let btn = document.getElementById("btn"); btn.addEventListener("click",function () { let ul = document.createElement("ul"); for(let i = 0; i < 5; i++){ let li = document.createElement("li"); let text = document.createTextNode("Menu item " + i); li.appendChild(text); ul.appendChild(li); } document.getElementById("menu").appendChild(ul); }); </script> |
Uygulamamızın Demosu
Gördüğünüz gibi butona tıkladığımız anda Html belgemizdeki div etiketinin içerisine oluşturduğumuz ul li kodları ekleniyor.
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
Umarım “JavaScript Html DOM createElement(), createTextNode() Metodları ve Kullanımları” başlıklı yazım sizin için faydalı olmuştur.
Yeni bir yazımda görüşmek üzere.
, createTextNode() Metodları ve Kullanımları){kind=link}