So appendieren Sie ein Kind in DOM mithilfe der Appendchild -Methode in JavaScript?

Wenn Sie ein Element in HTML mithilfe der Skriptsprache ändern möchten, müssen Sie sich auf DOM beziehen, auch als Dokumentobjektmodell bezeichnet. DOM in seinem Kern ist eine einfache Programmierschnittstelle für diese HTML -Datei oder mit anderen Worten für die spezifische Webseite. Keine Skriptsprache ist ohne DOM -Schnittstelle nützlich, wenn es darum geht, HTML -Elemente zu manipulieren.

Eine der häufigsten Manipulationen für Webseiten besteht darin, einen Knoten zu ersetzen oder einen untergeordneten Knoten in einem übergeordneten Knoten hinzuzufügen. Dies kann durch die durchgeführt werden appendChild () Methode in JavaScript.

Was ist .appendChild () Methode

Der .appendChild () Die Methode ist eine eingebaute JavaScript-Funktion, mit der ein untergeordneter Knoten unter einem übergeordneten Knoten hinzugefügt wird. Der .appendChild () führt diese Leistung durch, indem Sie die nutzen DOM -Knotenschnittstelle. Wir sind jetzt mit dem vertraut, was es tut. Schauen wir uns also über seine Syntax an.

Syntax von .appendChild () Methode

Die Syntax von .appendChild () ist ziemlich selbsterklärend. Es ist wie:

Elternknoten.appendChild (Childnode);

Wie Sie deutlich sehen können, besteht es aus folgenden:

• Elternknoten: Das Element, in dem der andere Knoten angehängt werden soll.
• Childnode: Das zu angehängte Element.

Wann wird die Methode für appendChild () verwendet?

Der .appendChild () Fängt ein neu erstelltes Element im DOM an. Es wird auch verwendet, wenn Sie ein bereits vorhandenes Element neu ordnen müssen. In den meisten Fällen, beide Funktionen, die neu ordnen die vorhandenen Elemente und das Erstellen eines neuen Elements und das Hinzufügen in das DOM erfolgen auf ein Ereignis, das aufgrund der Interaktion des Benutzers mit der Webseite aufgerufen wurde. Dieses Ereignis kann auf eine Schaltfläche auf dem Bildschirm, auf einen bestimmten Maussposition oder sogar auf einen bestimmten Schlüsselschlag klicken.

Beispiel

Wir können nichts lernen, bis wir es ausprobieren. Versuchen wir also die Verwendung der .appendChild () Methode. Wir sollten:

• Erstellen Sie eine HTML -Seite mit einem übergeordneten Knoten
• Erstellen Sie eine Schaltfläche
• Erstellen Sie einen Kinderknoten.
• Gehen Sie den untergeordneten Knoten im übergeordneten Knoten auf der Taste Drücken Sie an.

Beginnen wir mit dem ersten Schritt, bei dem eine HTML -Seite eingerichtet wird. Erstellen Sie einen übergeordneten Knoten, indem Sie a erstellen div mit einem id = "Demo": In diesem Div geben wir ihm einen Kinderknoten, der a ist

Schild:

Dies ist Absatz 1 in "Div" -Tag

Lassen Sie uns den übergeordneten Knoten machen, der in unserem Fall das ist

Tag ein bisschen prominent, indem Sie ihm eine Hintergrundfarbe geben. Verwenden Sie dazu die ID = "Demo" und geben Sie ihr ein CSS -Styling mit den folgenden Zeilen

Wir werden die folgenden Ergebnisse erzielen.

Jetzt wissen wir, dass der übergeordnete Knoten von

Tag wird hervorgehoben. Wenn wir einen untergeordneten Knoten innerhalb dieses übergeordneten Knotens hinzufügen, würde der hervorgehobene Bereich zunehmen.

Kommen Sie zurück, um einen Kinderknoten anzuhängen. Lassen Sie uns einen Auslöser erstellen, um einen untergeordneten Knoten anzuhängen, und zu diesem Zweck werden wir mit der folgenden Zeile eine Schaltfläche auf dem Bildschirm hinzufügen:

Klicken Sie hier, um appendChild zu erhalten

Damit wird unsere Ausgabe:

Wir müssen die Funktion deklarieren, die einen untergeordneten Knoten innerhalb der angehängt hat div Bei jeder Taste drücken Sie. Erstellen Sie die Funktion wie diese:

Zähle = 2;
Funktion btnclicked ()
// Fügen Sie hier den späteren Code hier hinzu.

Wie Sie vielleicht bemerken, haben wir eine Variable namens "Zähler" erstellt. Diese Variable wird überprüft, wie viele untergeordnete Knoten wir im übergeordneten Knoten angehängt haben. Da haben wir bereits eine

Schild Als erstes Kind beginnen wir den Schalter von „2“ von „2“.

Jetzt brauchen wir einen Kinderknoten. Dafür werden wir eine erstellen

Schild mit etwas Text darin. Zum Erstellen von a

Tag, wir müssen zuerst eine erstellen Textnode und ein Absatzknoten und dann den Textknoten in die anhängen

Schild Knoten.

Ein ... kreieren Textnode mit dem folgenden Befehl:

TextNode = Dokument.CreateTextNode ("Dies ist Absatz" + Zähler + 'in "Div" Tag');

Wie Sie sehen können, verwenden wir den Zählerwert, um den Benutzer zu fordern, wie viele untergeordnete Knoten im übergeordneten Knoten vorhanden sind.

Als nächstes ist das Erstellen des

Tagelement:

PTAG = Dokument.CreateLement ("P");

Jetzt müssen wir die hinzufügen Textnode in die PTAG:

PTAG.appendChild (TextNode);

Zuletzt müssen wir das anhängen PTAG in der div mit dem id = "Demo":

parentNode = document.GetElementById ("Demo");
Elternknoten.appendChild (PTAG);

Vor dem Verlassen des btnclicked () Funktion müssen wir auch den Wert des Zählers erhöhen:

Zähler ++;

Der komplette Code -Snippet sieht so aus:

Zeit, endlich unsere Webseite auszuführen und die Ergebnisse zu betrachten. Sie sollten dies auf Ihrem Bildschirm sehen:

Dort haben Sie es, wir haben verschiedene Kinderknoten in einem übergeordneten Knoten erfolgreich angehängt. Wir können es auch bestätigen, indem wir den übergeordneten Knoten in den Entwicklerwerkzeugen des Browsers untersuchen.

Wir können deutlich sehen, dass alle Kinderknoten (

Tags) werden in der Tat an die angehängt div mit dem id = "Demo".

Abschluss

Der .appendChild () Die Methode von JavaScript wird verwendet, um einen untergeordneten Knoten innerhalb eines übergeordneten Knotens mit Hilfe der DOM -Knotenschnittstelle anzuhängen. Die Manipulation der Elemente der Webseite mithilfe einer Skriptsprache ist eine wichtige Aufgabe. Eine der gängigen Aufgaben beim Manipulieren von Webseiten besteht darin, Elemente als Kinderknoten an andere Elemente anzuhängen. Wir haben gelernt, wie die .appendChild () Methode funktioniert, seine Syntax und wenn sie verwendet wird. Wir haben eine HTML -Webseite, einen übergeordneten Knoten und angehängte untergeordnete Knoten erstellt, die mit dem angehängt sind .appendChild () Funktion.