So ändern Sie den Inhalt des HTML -Elements in JavaScript

Das HTML -Akronym für Hypertextmarke -Sprache wird verwendet, um die Struktur von Webseiten zu erstellen, die Sie jeden Tag im Internet sehen. In der Zwischenzeit ist JavaScript eine bekannte Skriptsprache, mit der dynamische Operationen auf Webseiten durchgeführt werden, um sie interaktiver zu gestalten.

Eine interessante HTML -Funktion ist HTML DOM Short für Dokumentobjektmodell. Es ist eine Programmierapi für HTML- und XML -Dokumente. Es wird im Grunde genommen verwendet, um den Dokumenten eine logische Struktur bereitzustellen. Es definiert, wie ein HTML -Dokument bewertet und manipuliert werden kann. Es ermöglicht JavaScript, den Inhalt von HTML -Elementen zu ändern.

In diesem Artikel werden wir diskutieren:

1. Ändern des Inhalts von HTML -Elementen mit JavaScript
2. Ändern Sie den HTML -Attributwert mit JavaScript
3. Verwendung des Dokuments.Write () Methode

Ändern des Inhalts von HTML -Elementen mit JavaScript

Die Innerhtml -Eigenschaft ist der schnellste Ansatz, um den Inhalt von HTML -Elementen zu verändern. Es wurde im Detail im Folgenden erläutert:

Innerhtml -Eigenschaft

Die Innerhtml -Eigenschaft verändert den Inhalt eines HTML -Elements. Um diese Methode zu verwenden, verwenden Sie die folgende Syntax.

Syntax der Verwendung von Innerhtml

Lassen Sie uns die Innerhtml -Eigenschaft mit einem Beispiel demonstrieren.

Beispiel 1

Dies ist ein Absatz

Der obige Absatz wurde durch Innerhtml -Eigentum geändert

Im obigen Beispiel manipulieren wir das

Element mit der JavaScript -Innerhtml -Eigenschaft. Der Absatz hat eine ID = "para1". Die HTML -DOM verwendet diese ID, um das bestimmte Element zu erhalten und dann den Inhalt von zu ändern

Tag mit der Innerhtml -Eigenschaft. Auf diese Weise wird der alte Absatz durch den neuen Absatz überschrieben. Die Ausgabe des obigen Beispiels lautet wie folgt:

Wir können die Elemente auch mit dieser Methode ändern. Lassen Sie uns ein Beispiel machen, in dem die innere Eigenschaft die Eigenschaft ändert

Element mit seiner ID.

Beispiel 2

Ändern wir diese Überschrift

Die alte Überschrift wurde geändert

Im obigen Beispiel verwendet HTML DOM ID = "Head2", um die zu erhalten

Element und die innerhtml -Eigenschaft verändern den Inhalt des Elements. Die Ausgabe ist wie folgt.

Lassen Sie uns nun diskutieren, wie wir den Wert eines HTML -Attributs mit JavaScript ändern können.

Änderung des Attributwerts

Mit dem Attributnamen können wir den Wert des HTML -Attributs ändern.

Syntax

Die Syntax ist unten dargestellt:

dokumentieren.GetElementById (ID).Attribut = neuer Wert

Demonstrieren wir die obige Syntax anhand eines geeigneten Beispiels.

Das Hundebild wird in Katzenbild geändert

Im obigen Beispiel erhält HTML DOM das IMG -Element von id = "Image1", dann die JavaScript -SRC -Attribut -Chests eines Hundepickens.JPG an einen Catpic.JPG.

Weiter mit der letzten Methode, die Dokument ist.Write () Methode.

dokumentieren.schreiben()

dokumentieren.Write () wird verwendet, um HTML -Ausdrücke oder JavaScript -Code direkt in den HTML -Ausgangsstrom zu schreiben. Es wird das Dokument überschrieben, wenn Sie diese Methode nach dem Laden des HTML -Dokuments verwenden. Versuchen wir ein Beispiel.

Dies ist ein Absatz

Dies ist ein weiterer Absatz

Im obigen Beispiel das Dokument.Write () -Methode zeigt die Höhe des Fensterbildschirms als Ausgabe an.

Abschluss

HTML DOM liefert bestimmte Eigenschaften, die es JavaScript ermöglichen, den Inhalt von HTML -Elementen zu ändern. Um den Inhalt von HTML -Elementen zu ändern, wird die Eigenschaft Innerhtml () verwendet. Sie können auch den Attributwert von HTML -Elementen ändern, indem Sie den Attributnamen direkt verwenden. Inzwischen das Dokument.Die Eigenschaft write () wird verwendet, um HTML -Ausdrücke oder JavaScript -Code direkt in den HTML -Ausgabestream zu schreiben. In diesem Artikel werden diese Eigenschaften ausführlich mit relevanten Beispielen erörtert.