JavaScript HTML elementy DOM (węzły)
Dodawanie i usuwanie węzłów (elementy HTML)
Tworzenie nowych elementów HTML (węzłów)
Aby dodać nowy element do DOM HTML, musisz najpierw utworzyć element (węzeł elementu), a następnie dołączyć go do istniejącego elementu.
Przykład
<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>
Przykład wyjaśniony
Ten kod tworzy nowy <p>element:
const para = document.createElement("p");
Aby dodać tekst do <p>elementu, musisz najpierw utworzyć węzeł tekstowy. Ten kod tworzy węzeł tekstowy:
const node = document.createTextNode("This is a new paragraph.");
Następnie musisz dołączyć węzeł tekstowy do <p>elementu:
para.appendChild(node);
Na koniec musisz dołączyć nowy element do istniejącego elementu.
Ten kod znajduje istniejący element:
const element = document.getElementById("div1");
Ten kod dołącza nowy element do istniejącego elementu:
element.appendChild(para);
Tworzenie nowych elementów HTML - insertBefore()
Metoda appendChild()w poprzednim przykładzie dołączyła nowy element jako ostatnie dziecko rodzica.
Jeśli nie chcesz, możesz skorzystać z insertBefore()metody:
Przykład
<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>
Usuwanie istniejących elementów HTML
Aby usunąć element HTML, użyj remove()
metody:
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>
Przykład wyjaśniony
Dokument HTML zawiera <div>element z dwoma węzłami podrzędnymi (dwa <p>
elementy):
<div>
<p id="p1">This is a paragraph.</p>
<p id="p2">This is another paragraph.</p>
</div>
Znajdź element, który chcesz usunąć:
const elmnt = document.getElementById("p1");
Następnie wykonaj metodę remove() na tym elemencie:
elmnt.remove();
Ta remove()metoda nie działa w starszych przeglądarkach, zobacz poniższy przykład, jak z niej korzystać
removeChild().
Usuwanie węzła podrzędnego
W przypadku przeglądarek, które nie obsługują tej remove()metody, musisz znaleźć węzeł nadrzędny, aby usunąć element:
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 child = document.getElementById("p1");
parent.removeChild(child);
</script>
Przykład wyjaśniony
Ten dokument HTML zawiera <div>element z dwoma węzłami podrzędnymi (dwa <p>
elementy):
<div id="div1">
<p id="p1">This is a paragraph.</p>
<p id="p2">This is another paragraph.</p>
</div>
Znajdź element z id="div1":
const parent = document.getElementById("div1");
Znajdź <p>element z id="p1":
const child = document.getElementById("p1");
Usuń dziecko z rodzica:
parent.removeChild(child);
Oto typowe obejście: Znajdź dziecko, które chcesz usunąć, i użyj jego
parentNodewłaściwości, aby znaleźć rodzica:
const child = document.getElementById("p1");
child.parentNode.removeChild(child);
Zastępowanie elementów HTML
Aby zastąpić element HTML DOM, użyj replaceChild()metody:
Przykład
<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>