Elementy (węzły) JavaScript HTML DOM

Dodawanie i usuwanie węzłów (elementów HTML)

Tworzenie nowego elementu HTML (węzła)

Aby dodać nowy element do HTML DOM, musisz najpierw utworzyć ten element (węzeł elementu), a następnie dodać go do istniejącego elementu.

Przykład

<div id="div1">
<p id="p1">To jest akapit.</p>
<p id="p2">To inny akapit.</p>
</div>
<script>
var para = document.createElement("p");
var node = document.createTextNode("To nowy tekst.");
para.appendChild(node);
var element = document.getElementById("div1");
element.appendChild(para);
</script>

Spróbuj sam

Przykład wyjaśnia

Ten kod tworzy nowy <p> Element:

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

Aby dodać <p> Aby dodać tekst do elementu, musisz najpierw utworzyć węzeł tekstowy. Ten kod tworzy węzeł tekstowy:

var node = document.createTextNode("To jest nowy akapit.");

Następnie musisz dodać <p> Dodaj ten węzeł tekstowy do elementu:

para.appendChild(node);

Ostatecznie musisz dodać ten nowy element do istniejącego elementu.

Ten kod znajduje istniejący element:

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

To kod dodaje nowy element do istniejącego elementu:

element.appendChild(para);

Tworzenie nowego elementu HTML - insertBefore()

W przykładzie poniżej: appendChild() metody, aby dodać nowy element jako ostatniego potomka rodzica.

Poza tym możesz użyć insertBefore() Metoda:

Przykład

<div id="div1">
<p id="p1">To jest akapit.</p>
<p id="p2">To inny akapit.</p>
</div>
<script>
var para = document.createElement("p");
var node = document.createTextNode("To nowy tekst.");
para.appendChild(node);
var element = document.getElementById("div1");
var dziecko = document.getElementById("p1");
element.insertBefore(para, dziecko);
</script>

Spróbuj sam

Usuń istniejący element HTML

Aby usunąć element HTML, użyj remove() Metoda:

Przykład

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

Spróbuj sam

Przykład wyjaśnia

Ten dokument HTML zawiera jeden element z dwoma potomkami (dwoma <p> rodzica elementu) <div> Element:

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

Znajdź element do usunięcia:

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

Następnie przeprowadź remove() Metoda:

elmnt.remove();

Uwaga:Metoda remove() nie działa w starych przeglądarkach, zobacz poniższy przykład, aby dowiedzieć się, jak użyć zamiennie: removeChild().

usuwanie potomków

Dla przeglądarek nieobsługujących remove() Metoda przeglądarki, aby usunąć element, musisz znaleźć węzeł nadrzędny:

Przykład

<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 dziecko = document.getElementById("p1");
parent.removeChild(child);
</script>

Spróbuj sam

Przykład wyjaśnia

Ten dokument HTML zawiera jeden element z dwoma potomkami (dwoma <p> rodzica elementu) <div> Element:

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

znajdź id="div1" Element:

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

znajdź id="p1" z <p> Element:

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

Usuń potomka z elementu nadrzędnego:

parent.removeChild(child);

To jest powszechnie stosowany sposób rozwiązania: znajdź do usunięcia potomka i użyj jego parentNode Atrybut znajduje rodzica węzła:

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

Zastąp element HTML

Aby zastąpić element, użyj replaceChild() Metoda:

Przykład

<div id="div1">
<p id="p1">To jest akapit.</p>
<p id="p2">To inny akapit.</p>
</div>
<script>
var para = document.createElement("p");
var node = document.createTextNode("To nowy tekst.");
para.appendChild(node);
var parent = document.getElementById("div1");
var dziecko = document.getElementById("p1");
parent.replaceChild(para, dziecko);
</script>

Spróbuj sam