HTML DOM innerHTML Property
Element Object
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:
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
Color Picker
