Wie erstelle ich ein neues h1-Element mit JavaScript?

Um Inhalte für dynamische Webseiten zu erstellen, indem Text zu Benutzeraktionen angezeigt wird, oder um die Attribute vollständig anzupassen und zu steuern, können die JavaScript-Methoden verwendet werden. Benutzer können auch mithilfe von JavaScript neue HTML-Elemente generieren.createElement()„, Und „insertAdjacentHTML()” Methoden und so weiter. Diese Methoden verbessern das Benutzererlebnis und ermöglichen eine intuitivere und interaktivere Inhaltserstellung.

In diesem Blog wird die Vorgehensweise zum Erstellen eines neuen „h1”-Element mit Hilfe von JavaScript-Methoden.

Wie erstelle ich ein neues „h1“-Element mit JavaScript?

Der „h1Das „Element“ wird mit JavaScript erstellt, um mehrere Überschriften programmgesteuert zu generieren, anstatt jede einzelne manuell zu codieren, was viel Zeit und Mühe spart. Außerdem kann der Programmierer die Logik zum Generieren von Überschriften in wiederverwendbare Funktionen oder Komponenten kapseln.

Es gibt drei Methoden oder Techniken, mit denen JavaScript ein neues „h1“ Element. Diese Methoden werden im Folgenden zusammen mit einer praktischen Demonstration definiert:

Methode 1: Verwendung der Methoden „createElement()“ und „appendChild()“.

Der „createElement()“ Und „appendChild()„Methoden können in Kombination für die Erstellung von HTML-Elementen wie „“ verwendet werden.h1“. Der „createElement()Die Methode „erstellt dynamisch die angegebenen HTML-Elemente und die Methode „appendChild()Die Methode wird verwendet, um das neu erstellte HTML-Element an den DOM-Baum anzuhängen oder einzufügen. Besuchen Sie zum Beispiel den folgenden Codeblock:

Verwendung der Methoden createElement und appendChild



var demo1 = document.createElement(„h1“);
var Platzierung = document.createTextNode(„Die Überschrift wird erstellt“);
demo1.appendChild(placeing);

document.body.appendChild(demo1);

Im obigen Codeblock:

  • Zuerst die „h1” HTML-Element wird mit Hilfe des „ erstelltcreateElement()”-Methode und gespeichert in einem „Demo1” benannte Variable.
  • Als nächstes wird ein Knoten erstellt, der eine Dummy-Nachricht enthält und mithilfe der Funktion „“ in den DOM-Baum eingefügt wird.appendChild()“ Methode.
  • Am Ende wird „demo1“ auf der Webseite angezeigt, indem das „h1”-Element im Body-Tag mit dem „appendChild()“ Methode.

Nach der Zusammenstellung:

Der obige Snapshot des Browsers bestätigt, dass das „h1“-Element mit JavaScript erstellt wurde.

Methode 2: Verwendung der Eigenschaft „innerHTML“.

Der „innerHTMLDie Eigenschaft „“ wird häufig verwendet, um den HTML-Inhalt eines Elements auf einfachste und einfachste Weise einzufügen oder zu aktualisieren. Im folgenden Code steht beispielsweise „h1Das Element wird mit dem Befehl „ auf der Webseite eingefügt.innerHTML“ Eigentum:

Verwendung von innerHTML



var demo2 = document.getElementById(„root“);
demo2.innerHTML = „

Die Überschrift wird erstellt

„;

Im obigen Codeausschnitt wird die Referenz des Ziel-HTML-Elements in einer Variablen gespeichert, auf der das neue „h1”-Element wird gedruckt. Dann ist die „innerHTMLDie Eigenschaft „ wird an die Variable angehängt und die Eigenschaft „h1Das Element wird zusammen mit den Dummy-Daten darin gespeichert. Diese Daten werden an der in der oben erstellten Variablen angegebenen Position angezeigt.

Nach der Zusammenstellung:

Die Ausgabe zeigt, dass „h1Das Element wurde dynamisch mit JavaScript erstellt.

Methode 3: Verwendung der Methode „insertAdjacentHTML()“.

Eine andere Möglichkeit, HTML-Elemente einzufügen wie „h1” erfolgt durch die Verwendung von „insertAdjacentHTML()“ Methode. Diese Methode akzeptiert vier Werte, nämlich „afterbegin“, „afterend“, „beforeend“ und „beforebegin“. Diese Werte geben die Position an, an der das neue oder ausgewählte Element auf der Webseite eingefügt werden muss, wie unten gezeigt:

Verwendung der Methode insertAdjacentHTML()


var demo3 = document.getElementById(„root“);
demo3.insertAdjacentHTML(„beforeend“, „

Überschrift wird mit der Methode insertAdjacentHTML() erstellt

„);

Im obigen Codeausschnitt:

Der „insertAdjacentHTML()Die Methode wird entlang der Variablen verwendet, die den Verweis auf ein zufälliges Element speichert. Dies akzeptiert zwei Parameter; Der erste Parameter zeigt die Position relativ zum angegebenen HTML-Element, dessen Referenz in der bereits beschriebenen Variablen gespeichert ist. Und der zweite enthält die Daten, die eingefügt werden müssen. In unserem Fall fügen wir das Element „h1“ ein.

Nach der Zusammenstellung:

Die Ausgabe zeigt, dass „h1Das Element wurde mit der JavaScript-Methode „insertAdjacentHTML()“ erstellt.

Abschluss

Die Erstellung eines neuen HTML-Elements wie „h1„Die Verwendung von JavaScript ist sehr hilfreich, da es das DOM manipulieren, HTML-Elemente erstellen, ändern und dynamisch mit ihnen interagieren kann. Es gibt drei Methoden, die zum Erstellen neuer HTML-Elemente verwendet werden können: „createElement() und appendChild()” Methoden, die „innerHTML„Eigentum und das“insertAdjacentHTML()“ Methode. In diesem Beitrag wurden die Methoden zum Generieren eines neuen „h1“-Elements mithilfe von JavaScript veranschaulicht.

Kommentar verfassen

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert

Nach oben scrollen