HTML DOM Element innerHTML-egenskap

Definition och användning

innerHTML Egenskapsinställning eller returnering av elementets HTML-innehåll (internt HTML).

Se också:

innerText-attributet

textContent-attributet

Exempel

Exempel 1

Hämta HTML-innehållet för elementet med id="myP":

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

Try it yourself

Exempel 2

Ändra HTML-innehållet för elementet med id="demo":

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

Try it yourself

Exempel 3

Hämta HTML-innehållet för <ul>-elementet med id="myList":

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

Try it yourself

Exempel 4

Ta bort HTML-innehållet för <p>-elementet med id="demo":

element.innerHTML = "";

Try it yourself

Exempel 5

Ändra HTML-innehållet för två element:

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

Try it yourself

Exempel 6

Repeat the HTML content of the element:

element.innerHTML += element.innerHTML;

Try it yourself

Example 7

Change the HTML content and URL of the link:

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

Try it yourself

Syntax

Return the innerHTML property:

element.innerHTML

Set the innerHTML property:

element.innerHTML = text

Attribute value

Value Description
String. HTML content

Return value

Type Description
String The HTML content of the element

The difference between innerHTML, innerText, and textContent

The innerText property returns:

Only returns the text content of the element and all its child elements, without CSS hidden text spacing and tags, except for <script> and <style> elements.

The innerHTML property returns:

The text content of the element, including all whitespace and internal HTML tags.

The textContent property returns:

The text content of the element and all its descendants, including whitespace and hidden CSS text, but without tags.

HTML example

<p id="myP">   This element has extra spacing     and contains <span>a span element</span>.</p>

JavaScript-exempel

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

Try it yourself

In the above example:

The innerText property returns:

This element has extra spacing and contains a span element.

The innerHTML property returns:

   This element has extra spacing    and contains <span>a span element</span>.

The textContent property returns:

   This element has extra spacing    and contains a span element.

Browser support

All web browsers support element.innerHTML:

Chrome IE Edge Firefox Safari Opera
Chrome IE Edge Firefox Safari Opera
Stöd Stöd Stöd Stöd Stöd Stöd