So verwenden Sie JavaScript, um HTML-Inhalte zu ändern

JavaScript ist eine sehr wichtige Sprache in der Frontend-Entwicklung. In JavaScript können wir durch Manipulation des DOM den Inhalt, den Stil, die Struktur usw. des HTML-Dokuments ändern. In diesem Artikel stellen wir vor, wie Sie JavaScript zum Ändern von HTML-Inhalten verwenden.

1. Manipulieren von DOM

DOM (Document Object Model) ist eine vom W3C definierte Programmierschnittstelle für den Zugriff auf HTML-, XML- und SVG-Dokumente. Über DOM können wir Elemente und Attribute in HTML-Dokumenten im JavaScript-Code manipulieren.

Um den HTML-Inhalt zu ändern, müssen wir zuerst das zu ändernde Element abrufen. Über das Dokumentobjekt in JavaScript können wir getElementById(), getElementsByClassName(), getElementsByTagName() und andere Methoden verwenden, um Elemente im HTML-Dokument abzurufen und diese Elemente dann zu bearbeiten.

Zum Beispiel können wir ein Element mit der ID „demo“ über den folgenden Code erhalten:

var demo = document.getElementById("demo");

2. Ändern Sie den HTML-Inhalt

Nachdem wir das Element erhalten haben, können wir den Inhalt des Elements über JavaScript ändern. JavaScript bietet eine Vielzahl von Methoden zum Ändern von HTML-Inhalten.

1. innerHTML-Attribut

Wir können den Inhalt des HTML-Elements ändern, indem wir auf das innerHTML-Attribut zugreifen. Die innerHTML-Eigenschaft legt den HTML-Inhalt eines Elements fest oder gibt ihn zurück.

Zum Beispiel können wir den Textinhalt eines p-Elements durch den folgenden Code in „Hello World“ ändern:

var p = document.getElementById("myParagraph");
p.innerHTML = "Hello World";

2. textContent-Attribut

Das textContent-Attribut ist ein schreibgeschütztes Attribut, das den Textinhalt eines Elements zurückgibt . Im Gegensatz zum innerHTML-Attribut gibt textContent den reinen Textinhalt des Elements ohne HTML-Markup zurück.

Zum Beispiel können wir den Textinhalt eines p-Elements über den folgenden Code abrufen:

var p = document.getElementById("myParagraph");
var text = p.textContent;

3. innerText-Attribut

Das innerText-Attribut ähnelt dem innerHTML-Attribut und wird auch zum Festlegen oder Zurückgeben des Textinhalts verwendet Element. Der Unterschied besteht darin, dass innerText den Textinhalt des Elements und seiner Nachkommenelemente zurückgibt, während innerHTML den Textinhalt zurückgibt, der HTML-Tags enthält.

Zum Beispiel können wir den Textinhalt eines p-Elements durch den folgenden Code in „Hallo Welt“ ändern:

var p = document.getElementById("myParagraph");
p.innerText = "Hello World";

4. Wertattribut

Das Wertattribut wird hauptsächlich zum Ändern von Texteingabefeldern, Dropdown-Feldern usw. verwendet. Optionsfelder und andere Formen Der Wert des Elements.

Zum Beispiel können wir den Wert eines Texteingabefelds durch den folgenden Code ändern:

var input = document.getElementById("myInput");
input.value = "Hello World";

3. Zusammenfassung

In JavaScript können wir durch Manipulation von DOM-Elementen den Inhalt des HTML-Dokuments einfach ändern. In diesem Artikel werden verschiedene Methoden zum Ändern von HTML-Inhalten vorgestellt, darunter die Attribute innerHTML, textContent, innerText und value. Wir können die geeignete Methode zum Betreiben von HTML-Elementen entsprechend der tatsächlichen Situation auswählen, um verschiedene Anforderungen in der Front-End-Entwicklung zu erfüllen.

Das obige ist der detaillierte Inhalt vonSo verwenden Sie JavaScript, um HTML-Inhalte zu ändern. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!