HTML DOM innerHTML Property
Example
Change the HTML content of a <p> element with id="demo":
document.getElementById("demo").innerHTML = "Paragraph changed!";
Try it yourself »
More "Try it Yourself" examples below.
Definition and Usage
The innerHTML property sets or returns the HTML content (inner HTML) of an element.
Browser Support
| Property | |||||
|---|---|---|---|---|---|
| innerHTML | Yes | Yes | Yes | Yes | Yes |
Syntax
Return the innerHTML property:
HTMLElementObject.innerHTML
Set the innerHTML property:
HTMLElementObject.innerHTML=text
Property Values
| Value | Description |
|---|---|
| text | Specifies the HTML content of an element |
Technical Details
| Return Value: | A String, representing the HTML content of an element |
|---|
More Examples
Example
Get the HTML content of a <p> element with id="myP":
var x = document.getElementById("myP").innerHTML;
The result of x will be:
I am a paragraph.
Try it yourself »
Example
Get the HTML content of a <ul> element with id="myList":
var x = document.getElementById("myList").innerHTML;
The result of x will be:
- Coffee
- Tea
Try it yourself »
Example
Change the HTML content of two elements:
document.getElementById("myP").innerHTML = "Hello Dolly.";
document.getElementById("myDIV").innerHTML = "How are you?";
Try it yourself »
Example
Alert the HTML content of a <p> element with id="demo":
alert(document.getElementById("demo").innerHTML);
Try it yourself »
Example
Delete the HTML content of a <p> element with id="demo":
document.getElementById("demo").innerHTML = ""; //
Replaces the content of <p> with an empty string
Try it yourself »
Example
Change the HTML content, URL, and target of a link:
document.getElementById("myAnchor").innerHTML = "W3Schools";
document.getElementById("myAnchor").href = "http://www.w3schools.com";
document.getElementById("myAnchor").target = "_blank";
Try it yourself »
Element Object
