So ändern Sie HTML -Elemente mit JavaScript
In diesem Artikel werden das Verfahren zum Ändern der HTML-Elemente mit JavaScript erörtert. Darüber hinaus werden in diesem Artikel auch die Beispiele zur Verwendung der Innerhtml -Eigenschaft nachgewiesen. So lass uns anfangen!
Syntax der Innerhtml JavaScript -Eigenschaft
Element.Innerhtml = WertHier, "ElementIst das HTML -Element, das Sie ausgewählt haben, um seinen Inhalt zu ändern, und “Wert”Ist der Inhalt, den wir festlegen werden.
Beispiel 1: Ändern von HTML -Elementen mit JavaScript
In diesem Beispiel wird Ihnen angezeigt, wie Sie das verwendenInnerhtml”JavaScript -Eigenschaft, um den Inhalt eines HTML -Elements zu ändern. Erstens werden wir ein Überschriftenelement mit dem hinzufügen
Überschrift Tag und ein Absatz mit dem
HTML -Tag:
Ändern Sie HTML -Elemente mit JavaScript
Eine Testzeichenfolge
Jetzt wollen wir den Inhalt der “ändern“"Element mit der ID"P1”. Dazu werden wir das nutzen “dokumentieren.GetElementById ()Methode, um das angegebene Element zu erhalten. Danach werden wir den Inhalt unserer festlegen
Element zu “Dies ist LinuxHint.com”:
Wir haben den Inhalt des obigen Absatzes geändert
Führen Sie das oben gegebene Programm in Ihrem bevorzugten Code-Editor oder einer Online-Codierungssandbox aus. Wir werden das JSBin jedoch für diesen Zweck verwenden:
Schauen Sie sich die untergegebene Ausgabe an, die wir durch die Ausführung des oben gegebenen Programms erhalten haben:
Beispiel 2: Ändern von HTML -Elementen mit JavaScript
Im vorherigen Beispiel haben wir den Inhalt des Absatzelements geändert. Jetzt schreiben wir ein JavaScript -Programm zum Ändern des Inhalts des HTML -Elements zur Überschrift.
Wie Sie sehen können, haben wir eine Überschrift mit dem hinzugefügt
Tag mit ID “ID1"Den Inhalt haben"Der alte JavaScript -Übergang”:
Der alte JavaScript -Übergang
Im nächsten Schritt erstellen wir eine Elementvariable, die die “aufgerufen wirddokumentieren.GetElementById ()"Methode, um das Überschriftenelement mit der ID zu erhalten"ID1”:
Dieses Programm änderte die "alte JavaScript -Überschrift" in "den neuen JavaScript -Übergang"
Die untergedrehte Ausgabe bedeutet, dass der Inhalt des HTML-Elements zur Überschrift jetzt geändert wird:
Beispiel 3: HTML -Elemente mit JavaScript ändern
Sie können auch den Inhalt der mehreren HTML -Elemente gleichzeitig ändern. Um Ihnen zu demonstrieren, wie es geht, werden wir drei HTML -Elemente hinzufügen, eine Überschrift mit dem
Tag, einen Absatz mit dem Tag und ein HTML -Element in der Inhaltsabteilung mit dem Tag:
Ändern Sie HTML -Elemente mit JavaScript
Dies ist das erste P -Element.
Dies ist das erste DIV -Element.
Jetzt werden wir den Inhalt des Absatzelements mit der ID ändern “P1"Und Content Division Element mit"div" Ausweis:
Schauen Sie sich die Ausgabe unseres JavaScript -Programms an:
Beispiel 4: HTML -Elemente mit JavaScript ändern
Sie können den Inhalt eines HTML -Elements auch durch die Verwendung des JavaScript löschenInnerhtml" Eigentum. Im folgenden JavaScript -Code haben wir ein Absatzelement mit dem “hinzugefügtDemo" Ausweis:
Klicken Sie auf die Schaltfläche unten angegeben, um den HTML -Inhalt zu löschen
Im nächsten Schritt fügen wir eine Taste hinzu und fügen eine "hinzu"ONCLICKEvent -Hörer dazu. Wenn wir auf “klicken"Löschen"Knopf, es wird das aufrufen"myfunction ()Methode zum Löschen des Inhalts von
HTML -Element:
Zuletzt werden wir das definieren “myfunction ()Methode wie folgt:
Die Ausführung des oben gegebenen Programms zeigt Ihnen die folgende Ausgabe an. Klick auf das "LöschenSchaltfläche zum Löschen des Inhalts des Absatzes HTML -Element:
Wie Sie sehen können, das “InnerhtmlEigentum der
Das HTML -Element ist jetzt auf leer eingestellt:
Abschluss
Der Innerhtml Die HTML -DOM -Eigenschaft wird verwendet, um den Inhalt der HTML -Elemente in JavaScript zu ändern. Es kann auch verwendet werden, um das dynamische HTML im HTML -Dokument wie Links, Kommentarformulare und Registrierungsformulare zu schreiben. In diesem Artikel wurde das Verfahren zum Ändern der HTML-Elemente mit JavaScript erörtert. Darüber hinaus werden in diesem Artikel auch Beispiele zur Verwendung der Innerhtml -HTML -Eigenschaft nachgewiesen.