JavaScript HTML DOM Elemanı (Düğüm)

Düğüm ve node'ları eklemek ve silmek (HTML elementleri)

Yeni HTML elementi (düğüm) oluşturma

HTML DOM'ye yeni bir element eklemek için, öncelikle bu elementi (element node) oluşturmanız gerekir, ardından onu mevcut bir elemente eklemelisiniz.

Örnek

<div id="div1">
<p id="p1">Bu bir paragraf.</p>
<p id="p2">Bu başka bir paragraf.</p>
</div>
<script>
var para = document.createElement("p");
var node = document.createTextNode("Bu yeni metin.");
para.appendChild(node);
var element = document.getElementById("div1");
element.appendChild(para);
</script>

Kişisel Olarak Deneyin

örnek açıklama

Bu kod, yeni bir <p> Element:

var para = document.createElement("p");

Ekleme için <p> Bir elemana metin eklemek için, önce bir metin düğümü oluşturmanız gerekir. Bu kod, bir metin düğümü oluşturur:

var node = document.createTextNode("Bu, yeni bir paragraf.");

Daha sonra <p> Bu elemana bu metni ekleyin:

para.appendChild(node);

Son olarak, bu yeni elemanı mevcut elemana eklemeniz gerekecek.

Bu kod, mevcut bir eleman bulur:

var element = document.getElementById("div1");

Bu kod, bu mevcut elemana yeni bir eleman ekler:

element.appendChild(para);

Yeni HTML elemanı oluşturma - insertBefore()

Önceki örnekteki appendChild() yöntemini kullanabilirsiniz, yeni bir elemanı ebeveynin en son alt elemanı olarak ekleyin.

Bu yanı sıra insertBefore() Yöntem:

Örnek

<div id="div1">
<p id="p1">Bu bir paragraf.</p>
<p id="p2">Bu başka bir paragraf.</p>
</div>
<script>
var para = document.createElement("p");
var node = document.createTextNode("Bu yeni metin.");
para.appendChild(node);
var element = document.getElementById("div1");
var child = document.getElementById("p1");
element.insertBefore(para, child);
</script>

Kişisel Olarak Deneyin

mevcut HTML elemanını silmek

HTML elemanını silmek için remove() Yöntem:

Örnek

<div>
  <p id="p1">Bu, bir paragraf.</p>
  <p id="p2">Bu, başka bir paragraf.</p>
</div>
<script>
const elmnt = document.getElementById("p1"); elmnt.remove();
</script>

Kişisel Olarak Deneyin

örnek açıklama

Bu HTML belgesi, iki alt düğümle (iki <p> elemanın <div> Element:

<div>
  <p id="p1">Bu, bir paragraf.</p>
  <p id="p2">Bu, başka bir paragraf.</p>
</div>

Silinecek elemanı bulun:

const elmnt = document.getElementById("p1");

Daha sonra bu elemana remove() Yöntem:

elmnt.remove();

Dikkat:remove() yöntemi eski tarayıcılarda çalışmaz, aşağıdaki örneği gözden geçirin, nasıl değişebilirsiniz removeChild()。

alt düğümü silmek

Desteği olmayan remove() Bu yöntemi kullanmak isteyen tarayıcılar için, bir elemanı silebilmek için ebeveyn düğümünü bulmanız gerekir:

Örnek

<div id="div1">
  <p id="p1">Bu, bir paragraf.</p>
  <p id="p2">Bu, başka bir paragraf.</p>
</div>
<script>
const parent = document.getElementById("div1");
const child = document.getElementById("p1");
parent.removeChild(child);
</script>

Kişisel Olarak Deneyin

örnek açıklama

Bu HTML belgesi, iki alt düğümle (iki <p> elemanın <div> Element:

<div id="div1">
  <p id="p1">Bu, bir paragraf.</p>
  <p id="p2">Bu, başka bir paragraf.</p>
</div>

bulun id="div1" elemanı:

const parent = document.getElementById("div1");

bulun id="p1" nin <p> Element:

const child = document.getElementById("p1");

Parent elemanın içinden alt elemanı silmek için:

parent.removeChild(child);

Bu, yaygın bir çözüm yöntemidir: silinecek alt düğümü bulun ve onun parentNode 属性找到父节点：

const child = document.getElementById("p1");
child.parentNode.removeChild(child);

HTML Elementi Değiştirme

Bir HTML elementini değiştirmek için replaceChild() Yöntem:

Örnek

<div id="div1">
<p id="p1">Bu bir paragraf.</p>
<p id="p2">Bu başka bir paragraf.</p>
</div>
<script>
var para = document.createElement("p");
var node = document.createTextNode("Bu yeni metin.");
para.appendChild(node);
var parent = document.getElementById("div1");
var child = document.getElementById("p1");
parent.replaceChild(para, child);
</script>

Kişisel Olarak Deneyin