JavaScript Html DOM createElement(), createTextNode() Metodları ve Kullanımları

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.

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:

Bu kod bize şu Html etiketini oluşturur:

Yada bir ul etiketi oluşturmak istiyorsak şu kodu yazıyoruz:

Bu kod bize şu Html etiketini oluşturur:

 ⇒  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.

 ⇒  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.

JavaScript Kodları

Uygulamamızın Demosu

javascript-html-dom-createElement-createTextNode-kullanimi

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.

Yorum Yazın

650+ ABONE ARASINA KATIL

Adını ve E-Posta adresini yazarak Html, Css, Javascript, Jquery, Bootstrap, Web Tasarım, C#, Bilgisayar, Telefon, Android, Veri Güvenliği ve daha birçok alanda ders anlatımlarından ve uygulamalı örneklerden anında haberdar olabilirsin.

Abone olduğunuz için teşekkürler.

Birşeyler yanlış gitti.