So ändern Sie HTML mit Javascript

Javascript ist eine leistungsstarke Skriptsprache, die häufig in der Webentwicklung verwendet wird, insbesondere zum Ändern von Inhalten in HTML-Dokumenten. In diesem Artikel wird erläutert, wie Sie mit Javascript HTML ändern.

1. HTML-Elemente abrufen

Bevor Sie Javascript zum Ändern von HTML verwenden, müssen Sie zunächst das zu ändernde HTML-Element abrufen. Wir können die Methoden getElementById(), getElementsByClassName(), getElementsByTagName() und andere Methoden des Dokumentobjekts verwenden, um HTML-Elemente abzurufen.

Wenn Sie beispielsweise das div-Element mit der ID „content“ erhalten möchten:

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

2. Ändern Sie den Inhalt des HTML-Elements

Mit der Referenz des HTML-Elements können wir Javascript verwenden, um den Inhalt zu ändern des HTML. JavaScript bietet eine Vielzahl von Methoden zum Ändern des Inhalts von HTML-Elementen. Hier sind einige gängige Methoden:

1. innerHTML-Attribut

Das innerHTML-Attribut kann den Inhalt im HTML-Element abrufen oder festlegen. Der folgende Code ändert beispielsweise den Inhalt des div-Elements mit der ID „content“ in „Hello World!“:

content.innerHTML = "Hello World!";

2. textContent-Attribut

Das textContent-Attribut kann den Textinhalt im HTML-Element abrufen oder festlegen. Der folgende Code ändert beispielsweise den Textinhalt des div-Elements mit der ID „content“ in „Hello World!“:

content.textContent = "Hello World!";

3. innerText-Eigenschaft

Die innerText-Eigenschaft kann den Textinhalt in einem HTML-Element abrufen oder festlegen , aber es zeigt kein HTML-Markup an. Der folgende Code ändert beispielsweise den Textinhalt im div-Element mit der ID „content“ in „Hello World!“, ohne das HTML-Tag anzuzeigen:

content.innerText = "Hello World!";

Mit der oben genannten Methode können wir den Inhalt des HTML einfach ändern dokumentieren.

3. HTML-Elemente hinzufügen

Neben der Änderung des Inhalts von HTML-Elementen können wir auch Javascript verwenden, um HTML-Elemente hinzuzufügen. HTML-Elemente können mit der Methode createElement() des Dokumentobjekts erstellt und dann mit den Methoden appendChild() oder insertBefore() in den HTML-Code eingefügt werden.

Zum Beispiel erstellt der folgende Code ein neues p-Element und fügt es dann in das div-Element mit der ID „content“ ein:

var newParagraph = document.createElement("p");
newParagraph.textContent = "This is a new paragraph.";
content.appendChild(newParagraph);

Der obige Code fügt das neue p-Element in das div-Element mit der ID „content“ ein „Das Ende von.

Wenn wir am Anfang des div-Elements ein neues p-Element mit der ID „content“ einfügen möchten, können wir die Methode insertBefore() verwenden. Der folgende Code erstellt ein neues p-Element und fügt es am Anfang des div-Elements mit der ID „content“ ein:

var newParagraph = document.createElement("p");
newParagraph.textContent = "This is a new paragraph.";
content.insertBefore(newParagraph, content.firstChild);

Der obige Code fügt das neue p-Element am Anfang des div-Elements mit der ID „content“ ein ".

4. HTML-Elemente löschen

Schließlich können wir auch Javascript verwenden, um HTML-Elemente zu löschen. HTML-Elemente können mit der Methode „removeChild()“ aus HTML entfernt werden.

Der folgende Code entfernt beispielsweise das erste untergeordnete Element aus dem div-Element mit der ID „content“:

content.removeChild(content.firstChild);

Der obige Code entfernt das erste untergeordnete Element aus dem div-Element mit der ID „content“.

Zusammenfassung

In diesem Artikel haben wir gelernt, wie man Inhalte in einem HTML-Dokument mit Javascript ändert. Wir können die getElementById()-Methode, die getElementsByClassName()-Methode und die getElementsByTagName()-Methode des Dokumentobjekts verwenden, um das HTML-Element abzurufen, das innerHTML-Attribut, das textContent-Attribut, das innerText-Attribut und andere Attribute verwenden, um den Inhalt des HTML-Elements zu ändern. und verwenden Sie die Methode createElement(), die Methode appendChild(), die Methode insertBefore() und andere Methoden, um HTML-Elemente hinzuzufügen, und verwenden Sie die Methode removeChild(), um HTML-Elemente zu löschen. Wenn Sie diese Methoden beherrschen, können Sie den Inhalt von HTML-Dokumenten problemlos mit Javascript ändern.

Das obige ist der detaillierte Inhalt vonSo ändern Sie HTML mit Javascript. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!