HTML DOM Element innerHTML-Eigenschaft

Definition und Verwendung

innerHTML Eigenschaft, die den HTML-Inhalt des Elements setzt oder zurückgibt (innerer HTML).

Siehe auch:

innerText-Attribut

textContent-Attribut

Beispiel

Beispiel 1

Erhalten Sie den HTML-Inhalt des Elements mit id="myP":

let html = document.getElementById("myP").innerHTML;

Probieren Sie es selbst aus

Beispiel 2

Ändern Sie den HTML-Inhalt des Elements mit id="demo":

document.getElementById("demo").innerHTML = "I have changed!";

Probieren Sie es selbst aus

Beispiel 3

Erhalten Sie den HTML-Inhalt des <ul>-Elements mit id="myList":

let html = document.getElementById("myList").innerHTML;

Probieren Sie es selbst aus

Beispiel 4

Löschen Sie den HTML-Inhalt des <p>-Elements mit id="demo":

element.innerHTML = "";

Probieren Sie es selbst aus

Beispiel 5

Ändern Sie den HTML-Inhalt von zwei Elementen:

let text = "Hello Dolly.";
document.getElementById("myP").innerHTML = text;
document.getElementById("myDIV").innerHTML = text;

Probieren Sie es selbst aus

Beispiel 6

Wiederholen Sie den HTML-Inhalt des Elements

element.innerHTML += element.innerHTML;

Probieren Sie es selbst aus

Beispiel 7

Ändern Sie den HTML-Inhalt und die URL des Links:

element.innerHTML = "W3School";
element.href = "";

Probieren Sie es selbst aus

Syntax

Geben Sie die Property innerHTML zurück:

element.innerHTML

Setzen Sie die Property innerHTML:

element.innerHTML = text

Attribute-Wert

Wert Beschreibung
Zeichenfolge. HTML-Inhalt.

Rückgabewert

Typ Beschreibung
Zeichenfolge Der HTML-Inhalt des Elements.

Unterschied zwischen innerHTML, innerText und textContent

Die Property innerText gibt zurück:

Gibt nur den Textinhalt des Elements und aller Nachkommen zurück, ohne durch CSS versteckten Text, Leerzeichen und Tags, außer für <script> und <style>-Elemente.

Die Property innerHTML gibt zurück:

Der Textinhalt des Elements, einschließlich aller Leerzeichen und innerer HTML-Tags.

Die Property textContent gibt zurück:

Der Textinhalt des Elements und aller Nachkommen, einschließlich Leerzeichen und durch CSS versteckter Text, aber ohne Tags.

HTML-Beispiel

<p id="myP">   Dieses Element hat zusätzlichen Abstand und enthält <span>ein span-Element</span>.</p>

JavaScript-Beispiel

let text = document.getElementById("myP").innerText;
let text = document.getElementById("myP").innerHTML;
let text = document.getElementById("demo").textContent;

Probieren Sie es selbst aus

Im obigen Beispiel:

Die Property innerText gibt zurück:

Dieses Element hat zusätzlichen Abstand und enthält ein span-Element.

Die Property innerHTML gibt zurück:

   Dieses Element hat zusätzlichen Abstand und enthält <span>ein span-Element</span>.

Die Property textContent gibt zurück:

   Dieses Element hat zusätzlichen Abstand und enthält ein <span>span</span>-Element.

Browser-Unterstützung

Alle Browser unterstützen element.innerHTML:

Chrome IE Edge Firefox Safari Opera
Chrome IE Edge Firefox Safari Opera
Unterstützung Unterstützung Unterstützung Unterstützung Unterstützung Unterstützung