Innerhtml -Eigenschaft in JavaScript

Die Innerhtml -Eigenschaft ermöglicht die Manipulation des HTML -Inhalts auf verschiedene Weise. Mit dem InnerHTML kann der Benutzer den HTML -Inhalt festlegen/aktualisieren oder den Inhalt eines HTML -Elements abrufen. Die Innerhtml -Eigenschaft verwendet die GetElementByID -Methode, um das Element zu identifizieren und einen relevanten Vorgang auszuführen.

Für ein besseres Verständnis haben wir den Artikel in verschiedene Brocken unterteilt, um die Verwendung der innerhtml -Eigenschaft im Detail zu demonstrieren:

• Wie die Innerhtml -Eigenschaft in JavaScript funktioniert
• So erhalten Sie den Inhalt eines Elements mit der Innerhtml -Eigenschaft
• So setzen Sie den Inhalt eines Elements mit der Innerhtml -Eigenschaft fest
• So aktualisieren Sie den Inhalt eines Elements mit der Innerhtml -Eigenschaft

Wie die Innerhtml -Eigenschaft in JavaScript funktioniert

Die Innerhtml -Eigenschaft setzt/aktualisiert oder gibt den HTML -Inhalt eines Elements zurück. Beide Funktionen einer Innerhtml -Eigenschaft haben unterschiedliche Syntaxe, die unten bereitgestellt werden.

Um den HTML -Inhalt zu erhalten:

Htmlobject.Innerhtml;

So setzen/aktualisieren Sie den HTML -Inhalt:

Htmlobject.Innerhtml = "New-Val";

In den obigen Syntaxen die Htmlobject Die Instanz identifiziert das HTML -Element, auf das die Innerhtml angewendet wird. Und das Element wird durch die Verwendung des GetelementById Methode. Während die Neuval ist ein Wert, der auf ein HTML -Element eingestellt wird.

So verwenden Sie die Innerhtml -Eigenschaft in JavaScript

In diesem Abschnitt werden verschiedene Beispiele aufgeführt, die die Verwendung der innerhtml -Eigenschaft in JavaScript zeigen.

So verwenden Sie die InnerHTML -Eigenschaft, um HTML -Inhalte zu aktualisieren

Die folgenden Codeausschnitte zeigen die Arbeit der InnerHTML -Eigenschaft, um den HTML -Inhalt zu aktualisieren.

Html

Willkommen bei LinuxHint

Klicken Sie hier, um zu erhalten

Der obige Code hat einen H4 Element mit id = "H”Und eine Taste mit ONCLICK Attribut.

JavaScript

Funktion get ()
Alarm (Dokument.GetElementById ("H").Innerhtml);

Der obige JavaScript -Code erstellt eine GET () -Funktion und enthält eine Warnung, die den Inhalt von Element ID = anzeigen würde. “H“.

Ausgang

Die Ausgabe zeigt, dass der Inhalt eines HTML -Elements als Alarminhalt angezeigt wird.

So verwenden Sie die InnerHTML -Eigenschaft, um HTML -Inhalte zu aktualisieren

In diesem Abschnitt lernen Sie, den Inhalt eines HTML -Elements mit der InnerHTML -Eigenschaft zu aktualisieren.

Html

LinuxHint

Klicken Sie hier, um zu aktualisieren

Der obige Code erstellt einen Absatz mit id = “P1Und ein Knopf mit einem ONCLICK Attribut.

JavaScript

Funktion update ()
dokumentieren.GetElementById ("P1").Innerhtml = "Willkommen! Innerhtml -Eigenschaft wird verwendet! ";

Der oben geschriebene JS -Code erstellt eine Funktion mit dem Namen aktualisieren() Dies wird auf dem Klicken auf die Schaltfläche aufgerufen, um die Innerhtml -Eigenschaft auf Element (Absatz) id = anzuwenden. "P1“.

Ausgang

Aus der Ausgabe wird beobachtet, dass der Inhalt des Absatzes aktualisiert wird.

So verwenden Sie die InnerHTML -Eigenschaft, um den HTML -Inhalt festzulegen

Hier werden wir zeigen, wie Innerhtml den Inhalt eines HTML -Elements festlegt. Hier.

Html

Dies ist ein Absatz

Klicken Sie hier, um den Inhalt festzulegen

Der obige HTML -Code hat zwei Absätze, in denen der Wert des ersten Absatzes (ID = ”P1") Wird verwendet, um den Wert des zweiten Absatzes festzulegen (ID ="p2")).

Notiz: Der div Im obigen Code ist nur der Grund zur Unterschätzung.

JavaScript

Funktion set ()
const Old = Dokument.GetElementById ("P1").Innerhtml;
dokumentieren.GetElementById ("P2").Innerhtml = alt;

Es wird eine Set () -Funktion erstellt, die zwei Aussagen enthält. Die erste Anweisung erhält den Inhalt von Absatz (ID = ”P1“) Und speichert es in einer Variablen (alt). Und die zweite Anweisung legt den Wert der Variablen für den Absatz fest (ID = ”p2")).

Ausgang

Aus der obigen Ausgabe hat der Absatz nichts zu zeigen, als auf die Schaltfläche auf den Inhalt des Absatzes zu klicken (ID = ”P1") Wird auf den Absatz festgelegt (ID ="p2"))

Abschluss

Mit der innerhtml -Eigenschaft von JavaScript können Sie den Inhalt eines HTML -Elements abrufen oder aktualisieren/festlegen. Mit der GetElementByID -Methode identifiziert die Innerhtml -Eigenschaft ein HTML -Element. In diesem Artikel wird die innere Eigenschaft von JavaScript in kurzer Weise demonstriert. Jeder Unterabschnitt hier präsentiert die Funktionalität der Innerhtml -Eigenschaft, um den Inhalt eines HTML -Elements zu erhalten, zu aktualisieren oder festzulegen.