Wie Sie wissen, ist JavaScript eine dynamische Skriptsprache. Um Webseiten dynamische Funktionen bereitzustellen, kann der HTML -Code mithilfe von HTML -Elementen in JavaScript geschrieben werden, und CSS -Attribute können in Kombination mit HTML -Elementen in JavaScript verwendet werden, um Ihre Webseite anzupassen. JavaScripts "CreateLement ()Mit „Methode können Sie HTML -Elemente erstellen und die“InnerhtmlMit ”Eigenschaft können Sie Inhalte für Webseiten schreiben.

In diesem Tutorial werden die Methoden zum Schreiben von HTML -Code dynamisch mit JavaScript beschrieben.

So schreiben Sie HTML -Code mit JavaScript dynamisch?

Verwenden Sie die folgenden Methoden zum Schreiben von HTML -Code mit JavaScript:

• Verwenden von Dokument.createLement () Methode
• Innerhtml -Eigenschaft

Methode 1: HTML -Code dynamisch mit dem Dokument schreiben.createLement () Methode

JavaScripts "dokumentieren.CreateLement ()Methode mit der “TextinhaltEigenschaft wird verwendet, um einen HTML -Code in JavaScript dynamisch zu schreiben. Mit der Methode createLement () können Sie ein bestimmtes HTML -Element erstellen, und die textContent -Eigenschaft wird verwendet, um den Textinhalt festzulegen.

Syntax

Verwenden Sie die angegebene Syntax, um ein HTML -Element in JavaScript zu erstellen:

dokumentieren.CreateLement ('Tagname')

Beispiel

Zuerst erstellen wir hier einen Absatz in einer JavaScript -Datei mithilfe der HTML

Tag in einem "CreateLement ()" Methode:

const text = dokument.CreateLement ('P');

Verwenden Sie die textContent -Eigenschaft, um den Text in einem Absatz festzulegen:

Text.textContent = "Willkommen bei LinuxHint";

Drucken Sie schließlich den Text auf der Webseite mit der “aus“dokumentieren.schreiben()" Methode:

dokumentieren.Schreiben Sie (Text.Textinhalt);

Hier können Sie in der Ausgabe sehen, dass wir den Text erfolgreich mit JavaScript auf die Webseite schreiben:

Methode 2: HTML -Code mit der InnerHTML -Eigenschaft dynamisch schreiben

Verwenden Sie das JavaScript, um den HTML -Code dynamisch zu schreiben, um das JavaScript zu verwendenInnerhtml" Eigentum. Es ist der einfachste Ansatz, um den Inhalt eines HTML -Elements zu ändern. Es unterstützt alle Browser.

Syntax

Folgen Sie der angegebenen Syntax, um die innere Eigenschaft zu verwenden:

Innerhtml = "Text"

Beispiel

Erstellen Sie in der HTML -Datei zunächst eine Schaltfläche, mit der die definierte Funktion aufgerufen wirdÜberschrift()”In JavaScript im Klickereignis:

klicken Sie hier

Erstellen Sie einen Absatz mithilfe

Tag, wobei der Text aus dem JavaScript angezeigt wird, und ihm eine ID zuweisen:

Eine Funktion definieren “Überschrift()”In einer JavaScript -Datei. Erhalten Sie die Referenz des HTML -Elements mithilfe seiner zugewiesenen ID mit Hilfe des “GetElementById ()Methode und wenden Sie eine anInnerhtmlEigentum darauf:

Funktionshading ()
dokumentieren.GetElementById ('Heading').Innerhtml = "

Willkommen bei LinuxHint

";

Ausgang

Wir haben alle wesentlichen Informationen zum Schreiben des HTML -Codes dynamisch mit JavaScript zusammengestellt.

Abschluss

Verwenden Sie das “, um den HTML -Code dynamisch in JavaScript zu schreibendokumentieren.CreateLement ()Methode mit der “Textinhalt”Eigentum oder das“Innerhtml" Eigentum. In der ersten Methode benötigen Sie keinen HTML -Code, während Sie in der InnerHTML -Eigenschaft auf das HTML -Element zugreifen und eine Operation darauf ausführen müssen. In diesem Tutorial haben wir die Methoden zum Schreiben von HTML -Code mit JavaScript dynamisch beschrieben.