Dodawanie i usuwanie węzłów (elementy HTML)
Tworzenie nowych elementów HTML (węzły)
Aby dodać nowy element do DOM HTML, należy utworzyć element (węzeł element), a potem 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>
var para = document.createElement("p");
var node = document.createTextNode("This is new.");
para.appendChild(node);
var
element = document.getElementById("div1");
element.appendChild(para);
</script> Spróbuj sam " Przykład Poradnik
Kod ten tworzy nowy <p> elementu:
var para = document.createElement("p");
Aby dodać tekst do <p> elementu, należy najpierw utworzyć węzeł tekstowy. Kod ten tworzy węzeł tekstowy:
var node = document.createTextNode("This is a new paragraph.");
Następnie należy dołączyć węzeł tekstowy do <p> element:
para.appendChild(node);
Wreszcie należy dołączyć nowy element do istniejącego elementu.
Kod ten znajdzie istniejący element:
var
element = document.getElementById("div1");
Ten kod dodaje nowy element do istniejącego elementu:
element.appendChild(para);
Tworzenie nowych elementów HTML - insertBefore()
appendChild() metoda, w poprzednim przykładzie, przyłączony nowy wkład, jak w poprzednim rodzic dziecka.
Jeśli użytkownik nie chce, że można użyć insertBefore() metodę:
Przykład
<div id="div1">
<p id="p1">This is a paragraph.</p>
<p id="p2">This is another paragraph.</p>
</div>
<script>
var para = document.createElement("p");
var node = document.createTextNode("This
is new.");
para.appendChild(node);
var element = document.getElementById("div1");
var child = document.getElementById("p1");
element.insertBefore(para,child);
</script> Spróbuj sam " Usunięcie istniejących elementów HTML
Aby usunąć element HTML, trzeba wiedzieć nadrzędny element:
Przykład
<div id="div1">
<p id="p1">This is a paragraph.</p>
<p id="p2">This is another paragraph.</p>
</div>
<script>
var parent = document.getElementById("div1");
var child = document.getElementById("p1");
parent.removeChild(child);
</script> Spróbuj sam " Metoda node.remove() realizowany jest w opisie DOM 4.
Ale ze względu na słabe wsparcie przeglądarki, nie należy go używać.
Przykład Poradnik
Niniejszy dokument HTML zawiera <div> element z dwóch węzłów podrzędnych (dwa <p> grupy):
<div id="div1">
<p id="p1">This is a paragraph.</p>
<p id="p2">This is another paragraph.</p>
</div>
Znajdź element o id="div1" :
var parent = document.getElementById("div1");
Znajdź element <p> id="p1" :
var child = document.getElementById("p1");
Usunąć dziecko od rodzica:
parent.removeChild(child);
Byłoby miło, aby móc usunąć element bez odwoływania się do rodzica.
Ale przykro. DOM musi wiedzieć, zarówno element, który chcesz usunąć, a jego rodzica.
Tutaj jest częstym obejście: Znajdź dziecku, które chcesz usunąć, i użyć jej właściwość parentNode znaleźć rodzica:
var child = document.getElementById("p1");
child.parentNode.removeChild(child);
Wymiana elementów HTML
Aby wymienić element do DOM HTML, należy użyć replaceChild() metodę:
Przykład
<div id="div1">
<p id="p1">This is a paragraph.</p>
<p id="p2">This is another paragraph.</p>
</div>
<script>
var para = document.createElement("p");
var node = document.createTextNode("This is new.");
para.appendChild(node);
var parent = document.getElementById("div1");
var child = document.getElementById("p1");
parent.replaceChild(para,child);
</script> Spróbuj sam "