1. Home
  2. JavaScript elementy HTML DOM

JavaScript elementy HTML DOM

Utwórz nowy element HTML

Utwórz nowy element HTML

Aby dodać nowy element do DOM HTML, należy najpierw utworzyć element (węzeł element), a następnie dołączyć element do istniejącego elementu.

Przykłady

<Div id = "div1">
<P id = "p1"> To jest akapit. </ P>
<P id = "p2"> Jest to kolejny akapit. </ P>
</ Div>

<Script>
var p = document.createElement ( "p");
Węzeł var = document.createTextNode ( "To jest nowy akapit.");
para.appendChild (node);

Element var = document.getElementById ( "div1");
element.appendChild (para);
</ Script>

Spróbuj »

Przykłady analizy:

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:

Węzeł var = document.createTextNode ( "To jest nowy akapit.");

Następnie należy dodać ten węzeł tekstu do elementu <p>:

para.appendChild (node);

Wreszcie, należy dodać ten nowy element do istniejącego elementu.

Kod znaleźć istniejący element:

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

Poniższy kod po istniejących elementów dodać nowy element:

element.appendChild (para);

Usuń istniejące elementy HTML

Poniższy kod demonstruje jak usunąć elementy:

Przykłady

<Div id = "div1">
<P id = "p1"> To jest akapit. </ P>
<P id = "p2"> Jest to kolejny akapit. </ P>
</ Div>

<Script>
var rodzic = document.getElementById ( "div1");
var dziecko = document.getElementById ( "P1");
parent.removeChild (dziecko);
</ Script>


Spróbuj »

Przykłady analityczne

Dokument HTML zawierający węzły potomne mają dwa (dwa <p> element) elementu <div>:

<div id="div1">
<p id="p1">这是一个段落。</p>
<p id="p2">这是另一个段落。</p>
</div>

Znajdź id = "Div1" elementy:

var rodzic = 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 Jeśli można usunąć element bez odniesienia do elementu nadrzędnego, to byłoby świetnie.
Ale niestety. elementy DOM, które trzeba wiedzieć, który ma zostać usunięty, a także jego elementem dominującym.

Jest to powszechne rozwiązanie: znaleźć element podrzędny, który chcesz usunąć, a następnie wykorzystać jego właściwości, aby znaleźć parentNode elementu nadrzędnego:

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

HTML DOM Tutorial

W HTML DOM części naszego poradnika JavaScript, nauczyłeś się:

  • Jak zmienić zawartość elementu HTML (innerHTML)
  • Jak zmienić styl elementów HTML (CSS)
  • Jak reagować na wydarzenia na HTML DOM
  • Jak dodać lub usunąć elementy HTML

Jeśli chcesz dowiedzieć się więcej na temat używania JavaScript aby uzyskać dostęp do wiedzy HTML DOM, odwiedź naszą pełną samouczek HTML DOM .

Online Tutorial

Web Tools

Hot Tools

Website Navigation