JavaScript HTML DOM Öğeleri (Düğümler)
Düğüm Ekleme ve Kaldırma (HTML Öğeleri)
Yeni HTML Öğeleri (Düğümler) Oluşturma
HTML DOM'ye yeni bir öğe eklemek için önce öğeyi (öğe düğümü) oluşturmanız ve ardından onu mevcut bir öğeye eklemeniz gerekir.
Örnek
<div id="div1">
<p id="p1">This is a paragraph.</p>
<p id="p2">This is another paragraph.</p>
</div>
<script>
const para = document.createElement("p");
const node = document.createTextNode("This is new.");
para.appendChild(node);
const element = document.getElementById("div1");
element.appendChild(para);
</script>
Örnek Açıklama
Bu kod yeni bir <p>öğe oluşturur:
const para = document.createElement("p");
Öğeye metin eklemek için <p>önce bir metin düğümü oluşturmalısınız. Bu kod bir metin düğümü oluşturur:
const node = document.createTextNode("This is a new paragraph.");
Ardından, metin düğümünü <p>öğeye eklemelisiniz:
para.appendChild(node);
Son olarak, yeni öğeyi mevcut bir öğeye eklemelisiniz.
Bu kod mevcut bir öğeyi bulur:
const element = document.getElementById("div1");
Bu kod, yeni öğeyi mevcut öğeye ekler:
element.appendChild(para);
Yeni HTML Öğeleri Oluşturma - insertBefore()
Önceki appendChild()örnekteki yöntem, yeni öğeyi ebeveynin son çocuğu olarak ekledi.
Bunu istemiyorsanız, insertBefore()yöntemi kullanabilirsiniz:
Örnek
<div id="div1">
<p id="p1">This is a paragraph.</p>
<p id="p2">This is another paragraph.</p>
</div>
<script>
const para = document.createElement("p");
const node = document.createTextNode("This is new.");
para.appendChild(node);
const element = document.getElementById("div1");
const child = document.getElementById("p1");
element.insertBefore(para, child);
</script>
Mevcut HTML Öğelerini Kaldırma
Bir HTML öğesini kaldırmak için şu remove()
yöntemi kullanın:
Örnek
<div>
<p id="p1">This is a paragraph.</p>
<p id="p2">This is another paragraph.</p>
</div>
<script>
const elmnt = document.getElementById("p1");
elmnt.remove();
</script>
Örnek Açıklama
HTML belgesi, <div>iki alt düğüme (iki <p>
öğe) sahip bir öğe içerir:
<div>
<p id="p1">This is a paragraph.</p>
<p id="p2">This is another paragraph.</p>
</div>
Kaldırmak istediğiniz öğeyi bulun:
const elmnt = document.getElementById("p1");
Ardından bu öğe üzerinde remove() yöntemini yürütün:
elmnt.remove();
Yöntem remove()eski tarayıcılarda çalışmaz,
removeChild()bunun yerine nasıl kullanılacağına ilişkin aşağıdaki örneğe bakın.
Alt Düğümü Kaldırma
Yöntemi desteklemeyen tarayıcılarda, remove()bir öğeyi kaldırmak için ana düğümü bulmanız gerekir:
Örnek
<div id="div1">
<p id="p1">This is a paragraph.</p>
<p id="p2">This is another paragraph.</p>
</div>
<script>
const parent = document.getElementById("div1");
const child = document.getElementById("p1");
parent.removeChild(child);
</script>
Örnek Açıklama
Bu HTML belgesi, <div>iki alt düğüme (iki <p>
öğe) sahip bir öğe içerir:
<div id="div1">
<p id="p1">This is a paragraph.</p>
<p id="p2">This is another paragraph.</p>
</div>
Öğeyi şununla bulun id="div1":
const parent = document.getElementById("div1");
<p>Öğeyi şununla bulun id="p1":
const child = document.getElementById("p1");
Çocuğu ebeveynden çıkarın:
parent.removeChild(child);
İşte yaygın bir geçici çözüm: Kaldırmak istediğiniz çocuğu
parentNodebulun ve ebeveyni bulmak için özelliğini kullanın:
const child = document.getElementById("p1");
child.parentNode.removeChild(child);
HTML Öğelerini Değiştirme
Bir öğeyi HTML DOM ile değiştirmek için şu replaceChild()yöntemi kullanın:
Örnek
<div id="div1">
<p id="p1">This is a paragraph.</p>
<p id="p2">This is another paragraph.</p>
</div>
<script>
const para = document.createElement("p");
const node = document.createTextNode("This is new.");
para.appendChild(node);
const parent = document.getElementById("div1");
const child = document.getElementById("p1");
parent.replaceChild(para, child);
</script>