Javascript Anhängen

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:

      53h1N2e2JcTmRTZIFItMB6Lz9mFISGZQ CP6OkNpEvNsAmFR5uykmTYLkS1F50UOokk62H14EHqSN4LOq0f3eGcfshnlatBuNVgGGf0WKaDgoBs8gSi1YBzSXQp> funktioniert noch immer < Fugen wir unserer Webseite JavaScript hinzu.</p> <h3>Elemente auswählen und erstellen</h3> <p>Bevor wir Elemente zu unserer Liste hinzufugen können, mussen wir die Elemente auswählen, mit denen wir arbeiten möchten arbeiten. Öffnen Sie eine Datei namens scripts.js und fugen Sie diesen Code hinzu:</p>  <p>Diese Codezeile wählt das Element auf unserer Seite mit dem Tag <em><ul></em> aus. Dies stellt unsere Liste dar. Als nächstes erstellen wir ein Element, das wir unserer Liste hinzufugen:</p>  <p>Dieser Code erstellt einen Textknoten mit einem <em><li></em>-Tag, der das Wort

    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:

    PPX9hW Qztc6gNJKNyOeRE2U6hg08YNO H0wIbQGGo9MfA90aFLp A7RDQ8 PsqdHEh6mSG OcHJeDB3efXaFHwI9Fa9DUKqkBjA7qzYk49xSJgps8C2vXIrS0sUxDOoDhiw SeU

    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: