Bu yazıda JavaScript aracılığıyla HTML öğesinin nasıl oluşturulacağını tartışacağız. Burada, oluşturulan öğeyi belgeye eklemek için bazı örnekler göreceğiz.
Öğeleri HTML ile oluşturmak, öğe oluşturmanın tek yolu değildir. Ancak basitlik açısından çoğu zaman doğrudan HTML belgesinde öğeler oluştururuz ancak JavaScript kullanarak öğeler oluşturmak da mümkündür.
document.createElement() JavaScript aracılığıyla belirtilen adla dinamik olarak bir HTML öğesi düğümü oluşturmak için kullanılır. Bu yöntem, parametre olarak öğenin adını alır ve o öğe düğümünü oluşturur.
Bir öğe oluşturulduktan sonra, oluşturulan öğeyi belgeye eklemek için AppendChild() yöntemini veya InsertBefore() yöntemini kullanabiliriz.
Şunu kullanabiliriz: Çocuğu kaldır() bir düğümü kaldırma yöntemini kullanabilir ve ayrıca değiştirÇocuk() Düğümü değiştirme yöntemi.
Sözdizimi
document.createElement(nodename);
Bu yöntem, aşağıdaki gibi belirtilen tek bir parametre değerini kabul eder:
ikili ağaç ve ikili arama ağacı arasındaki fark
düğüm adı: Zorunlu parametredir. Bu parametre string türündedir. Oluşturmamız gereken öğenin adını belirtir. Parametrede belirtilen eleman adı, elemanı yaratacaktır; aksi takdirde, belirtilen öğenin adı tanınmazsa bilinmeyen bir HTML öğesi oluşturulur.
document.createElement() yeni oluşturulan öğeyi döndürecektir.
Şimdi kullanımın bazı örneklerini görelim. document.createElement() yöntem. Burada iki örnek göstereceğiz. İlk örnekte kullanacağımız eklemeÇocuk() öğeyi belgeye ekleme yöntemini kullanacağız ve ikinci örnekte, insertBefore() tarafından oluşturulan bir öğeyi ekleme yöntemi document.createElement() yöntem.
Örnek 1
Bu örnekte, şunu kullanıyoruz: document.createElement() yeni bir düğme öğesi oluşturma yöntemi. Oluşturulan öğeyi kullanarak ekleyeceğiz. eklemeÇocuk() yöntem. Burada bir tane var eğlence() kullanarak yeni bir düğme öğesi oluşturacak yöntem createElement() yöntem. Metni kullanarak ayarlıyoruz. içHTML bu, düğmenin üst kısmında görüntülenecektir.
Aşağıda verilen örneği görelim.
function fun() { var btn = document.createElement('button'); btn.innerHTML = 'Click me'; document.body.appendChild(btn); } <h2> It is an example of using the document.createElement() method. </h2> <h4> Click the below button to insert a new button element in the document. </h4> Create Button Şimdi Test Edin Çıktı
Yukarıdaki kodun yürütülmesinden sonra çıktı şu şekilde olacaktır:
Verilen butona tıkladıktan sonra çıktı şu şekilde olacaktır:
Örnek2
Bu örnekte, şunu kullanıyoruz: document.createElement() yeni bir düğme öğesi oluşturma yöntemi. Burada şunu kullanıyoruz: insertBefore() oluşturulan öğeyi ekleme yöntemi. Paragraf alt öğesi olan bir div öğesi var. Yeni düğme öğesi, div öğesinin paragraf alt öğesinden önce eklenecektir.
Aşağıda verilen örneği görelim.
function fun() { var btn = document.createElement('button'); btn.innerHTML = 'Click me'; var element = document.getElementById('d1'); var child = document.getElementById('p1'); element.insertBefore(btn, child); } <h2> It is an example of using the document.createElement() method. </h2> <h4 id="heading4"> Click the below button to insert a new button element in the document. </h4> <p id="p1"> This is a paragraph. </p> Create Button Şimdi Test Edin Çıktı
Yukarıdaki kodun yürütülmesinden sonra çıktı şu şekilde olacaktır:
Yukarıdaki butona tıkladıktan sonra çıktı şu şekilde olacaktır:
Yukarıdaki ekran görüntüsü, yeni düğme öğesinin paragraf öğesinden önce eklendiğini göstermektedir. Bunun nedeni, insertBeofre() kullanılarak oluşturulan yeni öğeyi ekleme yöntemi document.createElement() yöntem.