Najlepszy samouczek Elementy HTML DOM W 2024 r. W tym samouczku możesz dowiedzieć się
Utwórz nowy element HTML - appendChild (),Przykłady,Przykłady analityczne,Utwórz nowy element HTML - insertBefore (),Przykłady,Usuń istniejące elementy HTML,Przykłady,Przykłady analityczne,Wymień elementy HTML,Przykłady,
Elementy HTML DOM
Dodawanie, usuwanie i wymienić elementy HTML.
Utwórz nowy element HTML - appendChild ()
Aby dodać nowy element do DOM HTML, należy najpierw utworzyć element i dołączyć go do istniejących elementów.
Przykłady
<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 »
Przykłady analityczne
Kod ten tworzy nowy <p> element:
var para=document.createElement("p");
Aby dodać tekst do elementu <p>, 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 elementu <p>:
Wreszcie, należy dodać ten nowy element do istniejących elementów.
Znajdź ten kod do istniejącego elementu:
var
element=document.getElementById("div1");
Kod, aby dodać nowy element do istniejących elementów:
element.appendChild(para);
Utwórz nowy element HTML - insertBefore ()
Na jednym przykładzie appendChild () metoda, jako nowy element ostatniego elementu podrzędnego elementu rodzica dodać.
Jeśli nie chcesz, można użyć metody insertBefore ():
Przykłady
<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 »
Usuń istniejące elementy HTML
Aby usunąć elementy HTML, trzeba wiedzieć elementu nadrzędnego elementu:
Przykłady
<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 »
Przykłady analityczne
Niniejszy dokument zawiera HTML <div> w jednym z dwóch węzłów podrzędnych (dwa <p> element) z:
<div id="div1">
<p id="p1">This is a paragraph.</p>
<p id="p2">This is another paragraph.</p>
</div>
Znajdź id = "Div1" elementy:
var parent=document.getElementById("div1");
Znajdź id = "P1" do elementu <p>:
var child=document.getElementById("p1");
Usuń z elementu nadrzędnego podelementów:
parent.removeChild(child);
| Czy mogę usunąć element w przypadku nie odnosi się do elementu nadrzędnego? Przepraszam. DOM trzeba zrozumieć te elementy, które chcesz usunąć, a także jego elementu nadrzędnego. |
---|
Oto wspólne rozwiązanie: znaleźć podrzędne elementy, które trzeba usunąć, a następnie za pomocą atrybutu parentNode znaleźć jego elementu nadrzędnego:
var child=document.getElementById("p1");
child.parentNode.removeChild(child);
Wymień elementy HTML
Aby wymienić elementy HTML DOM, należy użyć metody replaceChild ():
Przykłady
<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 »