Latest web development tutorials
 

HTML DOM innerHTML Propery

< 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

Examples

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 = "w3ii";
document.getElementById("myAnchor").href = "http://www.w3ii.com";
document.getElementById("myAnchor").target = "_blank";
Try it Yourself »

< Element Object