Latest web development tutorials
×

JavaScript kurs

JavaScript kurs JavaScript krótkie wprowadzenie JavaScript zwyczaj JavaScript eksport JavaScript gramatyka JavaScript oświadczenia JavaScript uwaga JavaScript zmienna JavaScript Typy danych JavaScript Przedmioty JavaScript funkcja JavaScript zakres JavaScript wydarzenie JavaScript sznur JavaScript operatorzy JavaScript porównać JavaScript If...Else JavaScript switch JavaScript for JavaScript while JavaScript Break & Continue JavaScript typeof JavaScript Typ konwersji JavaScript Wyrażenia regularne JavaScript błąd JavaScript Debugowanie JavaScript zmienny wyciąg JavaScript Tryb Strict JavaScript Zastosowanie niezgodne z przeznaczeniem JavaScript Uwierzytelnianie za pomocą formularzy JavaScript zarezerwowane słowa kluczowe JavaScript JSON JavaScript void JavaScript Kod Specyfikacja

JS funkcja

JavaScript definicja funkcji JavaScript Argumenty funkcji JavaScript wywołanie funkcji JavaScript zamknięcia

JS HTML DOM

DOM krótkie wprowadzenie DOM HTML DOM CSS DOM wydarzenie DOM EventListener DOM element

JS zaawansowane Tutorial

JavaScript Przedmioty JavaScript Number JavaScript String JavaScript Date JavaScript Array JavaScript Boolean JavaScript Math JavaScript RegExp Przedmioty

JS przeglądarka BOM

JavaScript Window JavaScript Window Screen JavaScript Window Location JavaScript Window History JavaScript Navigator JavaScript muzyka pop JavaScript Tymczasowy zdarzenia JavaScript Cookies

JS magazyn

JavaScript magazyn JavaScript test jQuery JavaScript test Prototype

JS Przykłady

JavaScript Przykłady JavaScript instancja obiektu JavaScript Przeglądarka Instancja obiektu JavaScript HTML DOM Przykłady JavaScript streszczenie

JS Reference Manual

JavaScript Przedmioty HTML DOM Przedmioty

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 .