Ekleme ve Çıkarma Düğümler (HTML Elements)
Yaratmak Yeni HTML Elemanları (Nodes)
HTML DOM yeni bir öğe eklemek için eleman oluşturmalısınız (element node) ilk ve sonra varolan bir elemana ekler.
Örnek
<div id="div1">
<p id="p1">This is a paragraph.</p>
<p id="p2">This is another paragraph.</p>
</div>
<script>
var para = document.createElement("p");
var node = document.createTextNode("This is new.");
para.appendChild(node);
var
element = document.getElementById("div1");
element.appendChild(para);
</script> Kendin dene " Örnek Açıklaması
Bu kod, yeni bir oluşturur <p> elemanı:
var para = document. createElement("p") ;
Metin eklemek için <p> elemanı, önce bir metin düğümü oluşturmalısınız. Bu kod, bir metin düğümü oluşturur:
var node = document. createTextNode("This is a new paragraph.") ;
Sonra metin düğümü eklemek gerekir <p> elemanı:
para. appendChild(node) ;
Son olarak varolan bir öğeye yeni eleman eklemek gerekir.
Bu kod varolan elemanı bulur:
var
element = document. getElementById("div1") ;
Bu kod Mevcut öğeye yeni bir öğe ekler:
element. appendChild(para) ;
Yeni HTML Öğeleri Yaratmak - insertBefore()
appendChild() önceki örnekte yöntem olup, ana son çocuk olarak yeni bir unsur eklenmesi ile oluşturulmaktadır.
Eğer kullanabileceği istemiyorsanız insertBefore() yöntemini:
Örnek
<div id="div1">
<p id="p1">This is a paragraph.</p>
<p id="p2">This is another paragraph.</p>
</div>
<script>
var para = document.createElement("p");
var node = document.createTextNode("This
is new.");
para.appendChild(node);
var element = document.getElementById("div1");
var child = document.getElementById("p1");
element.insertBefore(para,child);
</script> Kendin dene " Mevcut HTML Elementleri Çıkarma
Bir HTML elemanı kaldırmak için, öğenin üst bilmesi gerekir:
Örnek
<div id="div1">
<p id="p1">This is a paragraph.</p>
<p id="p2">This is another paragraph.</p>
</div>
<script>
var parent = document.getElementById("div1");
var child = document.getElementById("p1");
parent.removeChild(child);
</script> Kendin dene " Yöntem node. remove() node. remove() DOM 4 tarifnamede uygulanmaktadır.
Ama nedeniyle zayıf tarayıcı desteği, bunu kullanmamalısınız.
Örnek Açıklaması
Bu, HTML belge içeriyor <div> İki çocuk düğümler (iki ile eleman <p> elemanları):
<div id="div1">
<p id="p1">This is a paragraph.</p>
<p id="p2">This is another paragraph.</p>
</div>
Ile eleman bul id="div1" :
var parent = document. getElementById("div1") ;
Bul <p> ile eleman id="p1" :
var child = document. getElementById("p1") ;
ebeveynden çocuğa çıkarın:
parent. removeChild(child) ;
Ebeveyn atıfta olmadan bir öğe kaldırmak edebilmek için iyi olurdu.
Ama üzgünüm. DOM kaldırmak istediğiniz elemanı ve bunun üst hem bilmesi gerekir.
ebeveyni bulmak kaldırmak ve onun parentNode özelliğini kullanmak istediğiniz çocuğu bulun: Burada ortak bir geçici çözüm:
var child = document. getElementById("p1") ;
child.parentNode. removeChild(child) ;
HTML Elementleri Değiştirme
Kullanımı, HTML DOM bir öğe değiştirmek için replaceChild() metodu:
Örnek
<div id="div1">
<p id="p1">This is a paragraph.</p>
<p id="p2">This is another paragraph.</p>
</div>
<script>
var para = document.createElement("p");
var node = document.createTextNode("This is new.");
para.appendChild(node);
var parent = document.getElementById("div1");
var child = document.getElementById("p1");
parent.replaceChild(para,child);
</script> Kendin dene "