Latest web development tutorials
×

JavaScript Kurs

JavaScript Kurs JavaScript Kurze Einführung JavaScript Verwendung JavaScript Export JavaScript Grammatik JavaScript Statements JavaScript Note JavaScript Variable JavaScript Datentypen JavaScript Objekte JavaScript Funktion JavaScript Anwendungsbereich JavaScript Ereignis JavaScript Schnur JavaScript Die Betreiber JavaScript vergleichen JavaScript If...Else JavaScript switch JavaScript for JavaScript while JavaScript Break & Continue JavaScript typeof JavaScript Typumwandlung JavaScript Reguläre Ausdrücke JavaScript Fehler JavaScript Fehlerbeseitigung JavaScript Variable Lift JavaScript Strict-Modus JavaScript Missbrauch JavaScript Formularauthentifizierung JavaScript reservierte Schlüsselwörter JavaScript JSON JavaScript void JavaScript Code-Spezifikation

JS Funktion

JavaScript Funktionsdefinition JavaScript Funktionsargumente JavaScript Funktionsaufruf JavaScript Verschlüsse

JS HTML DOM

DOM Kurze Einführung DOM HTML DOM CSS DOM Ereignis DOM EventListener DOM Element

JS Erweiterte Tutorial

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

JS Browser BOM

JavaScript Window JavaScript Window Screen JavaScript Window Location JavaScript Window History JavaScript Navigator JavaScript Pop JavaScript Timed Ereignis JavaScript Cookies

JS Lagerhaus

JavaScript Lagerhaus JavaScript Test jQuery JavaScript Test Prototype

JS Beispiele

JavaScript Beispiele JavaScript Object-Instanz JavaScript Browser-Objektinstanz JavaScript HTML DOM Beispiele JavaScript Zusammenfassung

JS Referenzhandbuch

JavaScript Objekte HTML DOM Objekte

JavaScript HTML DOM-Elemente

Erstellen Sie ein neues HTML-Element

Erstellen Sie ein neues HTML-Element

Um ein neues Element in die HTML-DOM hinzuzufügen, müssen Sie zuerst das Element erstellen (ein Elementknoten), und dann das Element an ein vorhandenes Element anhängen.

Beispiele

<Div id = "div1">
<P id = "p1"> Dies ist ein Absatz. </ P>
<P id = "p2"> Dies ist ein weiterer Absatz. </ P>
</ Div>

<Script>
var para = document.createElement ( "p");
var node = document.createTextNode ( "Dies ist ein neuer Absatz.");
para.appendChild (Knoten);

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

Versuchen »

Beispiele der Analyse:

Dieser Code erstellt ein neues Element <p>:

var para=document.createElement("p");

So fügen Sie Text in das Element <p>, müssen Sie zuerst einen Textknoten erstellen. Dieser Code erstellt einen Textknoten:

var node = document.createTextNode ( "Dies ist ein neuer Absatz.");

Dann müssen Sie diesen Text Knoten mit dem <p> Element hinzu:

para.appendChild (Knoten);

Schließlich müssen Sie dieses neue Element zu einem vorhandenen Element hinzufügen.

Der Code ein vorhandenes Element zu finden:

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

Mit dem folgenden Code nach den vorhandenen Elemente hinzufügen, um ein neues Element:

element.appendChild (para);

Entfernen Sie die vorhandene HTML-Elemente

Der folgende Code zeigt, wie die Elemente zu löschen:

Beispiele

<Div id = "div1">
<P id = "p1"> Dies ist ein Absatz. </ P>
<P id = "p2"> Dies ist ein weiterer Absatz. </ P>
</ Div>

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


Versuchen »

Beispiele für analytische

Das HTML-Dokument die untergeordneten Knoten haben zwei (zwei Element <p>) des <div> Element enthält:

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

Finden id = "div1" Elemente:

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

Finden id = "p1" das Element <p>:

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

Entfernen Sie aus dem übergeordneten Element Unterelemente:

parent.removeChild(child);

Lampe Wenn Sie ein Element ohne einen Verweis auf das übergeordnete Element entfernen können, wäre es toll.
Aber leider. DOM-Elemente, die Sie wissen müssen gelöscht werden, sowie sein übergeordnetes Element.

Dies ist eine gemeinsame Lösung: Finden Sie das Kind Element, das Sie löschen wollen, und dann seine Eigenschaften verwenden, um parentNode Eltern-Element finden:

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

HTML-DOM-Tutorial

Im HTML-DOM Teil unserer JavaScript-Tutorial haben Sie gelernt:

  • Wie den Inhalt des HTML-Elements zu ändern (innerHTML-)
  • Wie die Art von HTML-Elementen zu ändern (CSS)
  • Wie man an Veranstaltungen auf dem HTML-DOM reagieren
  • Wie kann ich hinzufügen oder HTML-Elemente entfernen

Wenn Sie mehr über die Verwendung von JavaScript lernen möchten Wissen , um die HTML - DOM zugreifen zu können , besuchen Sie bitte unsere komplette HTML - DOM - Tutorial .