Latest web development tutorials

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

para.appendChild(node);

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

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