HTML DOM Element innerHTML
Example
Get the HTML content of an element with id="myP":
let html = document.getElementById("myP").innerHTML;
Try it Yourself »
Change the HTML content of an element with id="demo":
document.getElementById("demo").innerHTML = "I have changed!";
Try it Yourself »
Get the HTML content of a <ul> element with id="myList":
let html = document.getElementById("myList").innerHTML;
Try it Yourself »
Delete the HTML content of a <p> element with id="demo":
element.innerHTML = "";
Try it Yourself »
More examples below.
Description
The innerHTML property sets or returns the HTML content (inner HTML) of an element.
The Differences Between
innerHTML, innerText and textContent
See below
Syntax
Return the innerHTML property:
element.innerHTML
Set the innerHTML property:
element.innerHTML = text
Property Value
Property
Description
String HTML content.
Return Value
Type
Description
String The HTML content of the element.
More Examples
Example
Change the HTML content of two elements:
let text = "Hello Dolly.";
document.getElementById("myP").innerHTML = text;
document.getElementById("myDIV").innerHTML = text;
Try it Yourself »
document.getElementById("myP").innerHTML = text;
document.getElementById("myDIV").innerHTML = text;
Example
Repeat the HTML content of an element:
element.innerHTML += element.innerHTML;
Try it Yourself »
Example
Change the HTML content and URL of a link:
element.innerHTML = "W3Schools";
element.href = "https://www.w3schools.com";
Try it Yourself »
element.href = "https://www.w3schools.com";
The Differences Between
innerHTML, innerText and textContent
The innerHTML property returns:
The text content of the element, including all spacing and inner HTML tags.
The text content of the element, including all spacing and inner HTML tags.
The innerText property returns:
Just the text content of the element and all its children, without CSS hidden text spacing and tags, except <script> and <style> elements.
Just the text content of the element and all its children, without CSS hidden text spacing and tags, except <script> and <style> elements.
The textContent property returns:
The text content of the element and all descendants, with spacing and CSS hidden text, but without tags.
The text content of the element and all descendants, with spacing and CSS hidden text, but without tags.
HTML Example
<p id="myP"> This element has extra spacing and contains <span>a span
element</span>.</p>
JavaScript Examples
let text = document.getElementById("myP").innerText;
let text = document.getElementById("myP").innerHTML;
let text = document.getElementById("demo").textContent;
Try it Yourself »
let text = document.getElementById("myP").innerHTML;
let text = document.getElementById("demo").textContent;
In the example above:
The innerText property returns:
This element has extra spacing and contains a span element.
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>.
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.
This element has extra spacing and contains a span element.
Browser Support
element.innerHTML is supported in all browsers:
| Chrome | Edge | Firefox | Safari | Opera | IE |
| Yes | Yes | Yes | Yes | Yes | Yes |