JavaScript HTML DOM Elemente (Nodes)
Byvoeging en verwydering van nodusse (HTML-elemente)
Skep nuwe HTML-elemente (nodes)
Om 'n nuwe element by die HTML DOM te voeg, moet jy eers die element (elementnodus) skep en dit dan by 'n bestaande element voeg.
Voorbeeld
<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>
Voorbeeld Verduidelik
Hierdie kode skep 'n nuwe <p>element:
const para = document.createElement("p");
Om teks by die <p>element te voeg, moet jy eers 'n teksnodus skep. Hierdie kode skep 'n teksnodus:
const node = document.createTextNode("This is a new paragraph.");
Dan moet jy die teksnodus by die <p>element voeg:
para.appendChild(node);
Ten slotte moet jy die nuwe element by 'n bestaande element voeg.
Hierdie kode vind 'n bestaande element:
const element = document.getElementById("div1");
Hierdie kode voeg die nuwe element by die bestaande element:
element.appendChild(para);
Skep nuwe HTML-elemente - insertBefore()
Die appendChild()metode in die vorige voorbeeld het die nuwe element as die laaste kind van die ouer bygevoeg.
As jy dit nie wil hê nie, kan jy die insertBefore()metode gebruik:
Voorbeeld
<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>
Verwyder bestaande HTML-elemente
Om 'n HTML-element te verwyder, gebruik die remove()
metode:
Voorbeeld
<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>
Voorbeeld Verduidelik
Die HTML-dokument bevat 'n <div>element met twee kindernodusse (twee <p>
elemente):
<div>
<p id="p1">This is a paragraph.</p>
<p id="p2">This is another paragraph.</p>
</div>
Vind die element wat jy wil verwyder:
const elmnt = document.getElementById("p1");
Voer dan die remove() metode op daardie element uit:
elmnt.remove();
Die remove()metode werk nie in ouer blaaiers nie, sien die voorbeeld hieronder oor hoe om
removeChild()eerder te gebruik.
Die verwydering van 'n kindernode
Vir blaaiers wat nie die remove()metode ondersteun nie, moet jy die ouernodus vind om 'n element te verwyder:
Voorbeeld
<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>
Voorbeeld Verduidelik
Hierdie HTML-dokument bevat 'n <div>element met twee kindernodes (twee <p>
elemente):
<div id="div1">
<p id="p1">This is a paragraph.</p>
<p id="p2">This is another paragraph.</p>
</div>
Vind die element met id="div1":
const parent = document.getElementById("div1");
Vind die <p>element met id="p1":
const child = document.getElementById("p1");
Verwyder die kind van die ouer:
parent.removeChild(child);
Hier is 'n algemene oplossing: Soek die kind wat jy wil verwyder, en gebruik sy
parentNodeeiendom om die ouer te vind:
const child = document.getElementById("p1");
child.parentNode.removeChild(child);
Vervanging van HTML-elemente
Om 'n element na die HTML DOM te vervang, gebruik die replaceChild()metode:
Voorbeeld
<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>