Lägga till och ta bort noder (HTML-element)
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.
<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>
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);
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()
:
<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>
För att ta bort ett HTML-element, använd remove()
metod:
<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>
HTML-dokumentet innehåller ett ><div>
-element med två underordnade noder (två
<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.
För webbläsare som inte stöder metoden remove()
, måste du hitta föräldernod för att ta bort ett element:
<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>
Detta HTML-dokument innehåller ett ><div>
-element med två underordnade noder (två
<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);
För att ersätta ett element till HTML DOM, använd metoden replaceChild()
:
<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>