JavaScript DOM noder

Indholdsfortegnelse

Tilføjelse og fjernelse af noder (HTML-elementer)

Oprettelse af nye HTML-elementer (knudepunkter)

For at tilføje et nyt element til HTML DOM, skal du først oprette elementet (elementnode), og derefter tilføje det til et eksisterende element.

Eksempel

<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>

Prøv det selv →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript HTML DOM</h2>
<p>Add a new HTML Element.</p>

<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>

</body>
</html>

Eksempel forklaret

Denne kode opretter et nyt ><p> element:

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

For at tilføje tekst til ><p>-elementet skal du først oprette en tekstnode. Denne kode opretter en tekstnode:

const node = document.createTextNode("This is a new paragraph.");

Derefter skal du tilføje tekstnoden til ><p>-elementet:

para.appendChild(node);

Til sidst skal du tilføje det nye element til et eksisterende element.

Denne kode finder et eksisterende element:

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

Denne kode tilføjer det nye element til det eksisterende element:

element.appendChild(para);

Oprettelse af nye HTML-elementer - insertBefore()

Metoden appendChild() i det forrige eksempel tilføjede det nye element som forælderens sidste barn.

Hvis du ikke ønsker det, kan du bruge metoden insertBefore():

Eksempel

<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>

Prøv det selv →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript HTML DOM</h2>
<p>Add a new HTML Element.</p>

<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>

</body>
</html>

Fjernelse af eksisterende HTML-elementer

For at fjerne et HTML-element skal du bruge remove() metode:

Eksempel

<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>

Prøv det selv →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript HTML DOM</h2>
<h3>Remove an HTML Element.</h3>

<div>
<p id="p1">This is a paragraph.</p>
<p id="p2">This is another paragraph.</p>
</div>

<button onclick="myFunction()">Remove Element</button>

<script>
function myFunction() {
document.getElementById("p1").remove();
}
</script>

</body>
</html>

Eksempel forklaret

HTML-dokumentet indeholder et ><div> element med to underordnede noder (to

elementer):

<div>
	<p id="p1">This is a paragraph.</p>
	<p id="p2">This is another paragraph.</p>
</div>

Find det element, du vil fjerne:

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

Udfør derefter metoden remove() på det element:

elmnt.remove();

Metoden remove() virker ikke i ældre browsere, se eksemplet nedenfor om, hvordan du bruger removeChild() i stedet.

Fjernelse af en børneknude

For browsere, der ikke understøtter remove()-metoden, skal du finde overordnet node for at fjerne et element:

Eksempel

<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>

Prøv det selv →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript HTML DOM</h2>
<p>Remove Child Element</p>

<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>

</body>
</html>

Eksempel forklaret

Dette HTML-dokument indeholder et ><div> element med to underordnede noder (to

elementer):

<div id="div1">
	<p id="p1">This is a paragraph.</p>
	<p id="p2">This is another paragraph.</p>
</div>

Find elementet med id="div1":

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

Find elementet ><p> med id="p1":

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

Fjern barnet fra forælderen:

parent.removeChild(child);

Her er en almindelig løsning: Find det barn, du vil fjerne, og brug det parentNode egenskab for at finde forælderen:

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

Udskiftning af HTML-elementer

For at erstatte et element til HTML DOM, skal du bruge replaceChild() metoden:

Eksempel

<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>

Prøv det selv →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript HTML DOM</h2>
<h3>Replace an HTML Element.</h3>

<div id="div1">
<p id="p1">This is a paragraph.</p>
<p id="p2">This is a paragraph.</p>
</div>

<script>
const parent = document.getElementById("div1");
const child = document.getElementById("p1");
const para = document.createElement("p");
const node = document.createTextNode("This is new.");
para.appendChild(node);
parent.replaceChild(para,child);
</script>

</body>
</html>