JavaScript DOM-noder

Innehållsförteckning

    Visa innehållsförteckning

Lägga till och ta bort noder (HTML-element)

Skapa nya HTML-element (noder)

För att lägga till ett nytt element till HTML DOM, måste du skapa elementet (elementnoden) först, och sedan lägga till det till ett befintligt element.

Exempel

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

Prova själv →

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

Exempel förklarat

Den här koden skapar ett nytt ><p>-element:

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

För att lägga till text till elementet ><p> måste du först skapa en textnod. Denna kod skapar en textnod:

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

Sedan måste du lägga till textnoden till elementet ><p>:

para.appendChild(node);

Slutligen måste du lägga till det nya elementet till ett befintligt element.

Den här koden hittar ett befintligt element:

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

Denna kod lägger till det nya elementet till det befintliga elementet:

element.appendChild(para);

Skapa nya HTML-element - insertBefore()

Metoden appendChild() i föregående exempel lade till det nya elementet som förälderns sista barn.

Om du inte vill det kan du använda metoden insertBefore():

Exempel

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

Prova själv →

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

Ta bort befintliga HTML-element

För att ta bort ett HTML-element, använd remove() metod:

Exempel

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

Prova själv →

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

Exempel förklarat

HTML-dokumentet innehåller ett ><div>-element med två underordnade noder (två

element):

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

Hitta elementet du vill ta bort:

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

Kör sedan metoden remove() på det elementet:

elmnt.remove();

Metoden remove() fungerar inte i äldre webbläsare, se exemplet nedan om hur du använder removeChild() istället.

Ta bort en barnnod

För webbläsare som inte stöder metoden remove(), måste du hitta föräldernod för att ta bort ett element:

Exempel

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

Prova själv →

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

Exempel förklarat

Detta HTML-dokument innehåller ett ><div>-element med två underordnade noder (två

element):

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

Hitta elementet med id="div1":

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

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

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

Ta bort barnet från föräldern:

parent.removeChild(child);

Här är en vanlig lösning: Hitta barnet du vill ta bort och använd dess parentNode-egenskapen för att hitta föräldern:

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

Ersätter HTML-element

För att ersätta ett element till HTML DOM, använd metoden replaceChild():

Exempel

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

Prova själv →

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