Einfügen von HTML in ein Div - JavaScript

In vielen Fällen müssen Daten auf den Websites dynamisch hinzugefügt werden, z. B. in Social -Media. Insbesondere für jede Website, auf der sich ändernde Daten oder Inhalte angezeigt werden.

In diesem Artikel wird beschrieben, wie ein HTML in ein DIV -Element in JavaScript eingefügt wird.

So fügen Sie HTML mit JavaScript in ein DIV ein?

Da JavaScript eine dynamische Sprache ist und dynamisch verwendet wird. Verwenden Sie also zu diesem Zweck die vorgebauten JavaScript -Attribute. Verwenden Sie die folgenden Ansätze, um ein HTML in eine DIV einzulegen:

• Innerhtml -Eigenschaft
• InnerText -Eigenschaft

Methode 1: Einfügen HTML mit der Eigenschaft „Innerhtml“ in ein DIV ein

Verwenden Sie die “InnerhtmlEigentum zum Einfügen des HTML in eine Div. Es kann den HTML -Inhalt eines Elements als Zeichenfolge abrufen oder einen neuen HTML -Inhalt für ein Element festlegen, einschließlich Text- oder HTML -Tags.

Syntax

Verwenden Sie die angegebene Syntax für die Innerhtml -Eigenschaft, um HTML in JavaScript in ein DIV hinzuzufügen:

Element.Innerhtml

Beispiel

Erstellen Sie ein DIV in einem HTML -Element mit Tag und assoziieren Sie eine ID “und assoziieren Sie eine ID“InsertText”

In einer JavaScript -Datei oder dem Tag erhalten Sie die Referenz des DIV -Elements mit seiner zugewiesenen ID und verwenden Sie die “Innerhtml”Attribut zum Festlegen des Textes mit dem Ankerlink:

dokumentieren.getElementById ("InsertText").Innerhtml = "Willkommen bei LinuxHint";

Wie Sie sehen, dass der Text mit dem Link mit dem JavaScript erfolgreich auf die Seite eingefügt wurde:

Methode 2: Einfügen HTML mit der Eigenschaft "InnerText" in ein DIV ein

Eine andere Möglichkeit, HTML in eine DIV einzulegen, besteht darin, die zu verwendenInnerText" Eigentum. Es kann den Textinhalt des HTML -Elements erhalten/abrufen oder neue Textinhalte für ein HTML -Element festlegen.

Syntax

Verwenden Sie die folgende Syntax für die InnerText -Eigenschaft:

Element.InnerText

Beispiel

Hier fügen wir den Text im DIV -Element mit dem InnerText -Attribut hinzu:

dokumentieren.getElementById ("InsertText").InnerText = "hy! Ich füge in diese DIV mit der 'InnerText' -Eigenschaft "ein

Ausgang

Hier geht es darum, HTML mit JavaScript in ein DIV einzuführen.

Abschluss

Verwenden Sie zum Einfügen von HTML -Tags und Text in ein HTML -DIV -Element die “Innerhtml”Eigenschaft und zum Einfügen von nur Text in das Div -Element verwenden Sie die“InnerText" Eigentum. In diesem Artikel wurden die Möglichkeiten beschrieben, ein HTML mit JavaScript in ein DIV einzulegen.