Javascript Anhängen

Michael Zippo 04.11.2021

Die JavaScript-Methode appendChild() fugt ein Element am Ende eines Knotens hinzu. appendChild() wird h√§ufig verwendet, um

Elemente zu einer Liste. Sie mussen mehrere appendChild()-Anweisungen verwenden, wenn Sie einem Knoten mehr als ein Element hinzufugen m√∂chten.

Einige Listen enthalten Text; andere Listen enthalten Bilder; andere Listen enthalten benutzerdefinierte Webelemente. Was auch immer in einer Liste steht, eines ist sicher: Webseiten sind voller Listen.

Wenn Sie eine Liste erstellen, werden Sie ihre Werte normalerweise mit HTML hartcodieren. Dieser Vorgang kann mit einer Methode namens JavaScript appendChild beschleunigt werden. Mit dieser Methode k√∂nnen Sie ein Element am Ende einer Liste oder eines anderen Webelements hinzufugen, z. B. ein Blockquote.

In diesem Leitfaden werden wir daruber sprechen, was appendChild() in JavaScript ist und wie es funktioniert. Wir gehen ein Beispiel durch, um Ihnen den Einstieg zu erleichtern. Fangen wir an!

Was ist JavaScript appendChild?

appendChild() fugt einen Knoten am Ende eines ubergeordneten Knotens hinzu. appendChild() wird h√§ufig verwendet, um Elemente zu einer HTML-Liste hinzuzufugen. Ein Knoten bezieht sich auf ein beliebiges Element im HTML Document Object Model (DOM).

Die Syntax fur appendChild() lautet wie folgt:

"parent‚" bezieht sich auf das Element, dem Sie ein untergeordnetes Element hinzufugen m√∂chten. ‚ÄûKind‚" ist das Element, das Sie unten an das ubergeordnete Element anh√§ngen m√∂chten.

Sie mussen eine Methode wie JavaScript getElementById() oder eine andere verwenden ‚ÄûGetter‚" um ein Element abzurufen. Oder Sie k√∂nnen ein HTML-Element in JavaScript erstellen und dieses Element dann als "ubergeordnetes‚" Objekt mit appendChild().

Zum Beispiel eine Liste von Scone-Rezepten wurde eine Liste von Knoten enthalten. Diese Knoten w√§ren wahrscheinlich

Tags, weil wir eine Liste erstellen wurden.

Ein ubergeordnetes

Einrichten eines Frontends

Zuerst richten wir ein einfaches Frontend ein, das unsere Liste der Schulernamen anzeigt. √ñffnen Sie eine Datei namens index.html und fugen Sie sie ein dieser Code:

Wir haben ein einfaches HTML-Dokument erstellt . Dieses Dokument enth√§lt einen Titel und eine Liste ohne untergeordnete Elemente. Die Liste wird durch das Tag
dargestellt.

Als N√§chstes fugen wir einige Stile hinzu zu unserer Seite in einer Datei namens style.css, um die √Ñsthetik unserer Webseite:

Diese CSS-Regel legt eine hellgraue Hintergrundfarbe fur unsere Seite fest. Dazu verwenden wir die CSS-Eigenschaft fur die Hintergrundfarbe. Au√üerdem wird der Inhalt des Tags in die Mitte der Seite verschoben. Weitere Informationen zur Strukturierung des Layouts finden Sie in unserem Leitfaden fur CSS-Box-Modelle.
Unsere Seite funktioniert noch nicht. Wir haben keine Listenelemente hinzugefugt. Hier ist, was unsere Seite aussieht, wenn Sie es √∂ffnen in einem Browser:

Mit der JavaScript-Methode appendChild()

appendChild() k√∂nnen wir Elemente zu einem Knoten hinzufugen folgenden Code am Ende Ihrer scripts.js-Datei:

Dadurch wird das zuvor erstellte Listenelement zu unserer Liste hinzugefugt. √ñffnen Sie unsere Webseite und sehen Sie sich die Ergebnisse an:

jetzt ist unsere Liste ein Artikel Wir k√∂nnen unseren Code effizienter machen ient, indem Sie eine Funktion erstellen, die unserer Liste Elemente hinzufugt. Auf diese Weise k√∂nnen wir mehrere Elemente hinzufugen, ohne unseren createElement-Code von fruher wiederholen zu mussen.

√Ñndern Sie die Codezeilen createElement und textContent wie folgt:

Diese Funktion erstellt bei jedem Aufruf ein neues
-Element. √Ñndern Sie dann die appendChild()-Anweisung, um diese Funktion zu verwenden:

Dadurch werden drei Schuler erstellt: Mark, Chloe und Louise. √ñffnen wir unsere Datei index.html erneut und sehen Sie, ob unsere √Ñnderungen vorgenommen wurden: