Document get element by id 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

element with id="myList":

let html = document.getElementById["myList"].innerHTML;

Try it Yourself »

Delete the HTML content of a

element with id="demo":

element.innerHTML = "";

Try it Yourself »

More examples below.

Definition and Usage

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:

Set the innerHTML property:

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 »

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 = "//www.w3schools.com";

Try it Yourself »

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 innerText property returns: Just the text content of the element and all its children, without CSS hidden text spacing and tags, except and elements.

The textContent property returns: The text content of the element and all descendaces, with spacing and CSS hidden text, but without tags.

HTML Example

   This element has extra spacing     and contains a span element.

JavaScript Examples

let text = document.getElementById["myP"].innerText;

let text = document.getElementById["myP"].innerHTML;

let text = document.getElementById["demo"].textContent;

Try it Yourself »

In the example above:

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 a span element.

The textContent property returns:    This element has extra spacing    and contains a span element.

Browser Support

element.innerHTML is supported in all browsers:

Chrome	IE	Edge	Firefox	Safari	Opera
Yes	Yes	Yes	Yes	Yes	Yes




The HTML DOM allows JavaScript to change the content of HTML elements.

Changing HTML Content

The easiest way to modify the content of an HTML element is by using the innerHTML property.

To change the content of an HTML element, use this syntax:

document.getElementById[id].innerHTML = new HTML

This example changes the content of a

element:

Example




Hello World!


document.getElementById["p1"].innerHTML = "New text!";





Try it Yourself »

Example explained:

• The HTML document above contains a

  element with id="p1"

• We use the HTML DOM to get the element with id="p1"
• A JavaScript changes the content [innerHTML] of that element to "New text!"

This example changes the content of an

element:

Example





Old Heading


const element = document.getElementById["id01"];
element.innerHTML = "New Heading";





Try it Yourself »

Example explained:

• The HTML document above contains an

  element with id="id01"

• We use the HTML DOM to get the element with id="id01"
• A JavaScript changes the content [innerHTML] of that element to "New Heading"

Changing the Value of an Attribute

To change the value of an HTML attribute, use this syntax:

document.getElementById[id].attribute = new value

This example changes the value of the src attribute of an


document.getElementById["myImage"].src = "landscape.jpg";





Try it Yourself »

Example explained:

• The HTML document above contains an document.getElementById["image"] = "pic_mountain.jpg";

  Start the Exercise

  
  

  What is the use of document getElementById [] innerHTML?

  The innerHTML property returns: 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 and elements.

  How do I get an element from innerHTML?

  How it works. First, get the

  element with the id menu using the getElementById[] method. Second, create a new
  • element and add it to the
    element using the createElement[] and appendChild[] methods. Third, get the HTML of the
    element using the innerHTML property of the
    element.

  What are getElementById [] and innerHTML properties?

  innerHTML = 'Data or content'; getElementById: The getElementById refers to the HTML element using its ID. Data or content: Data is the new content to go into the element.

  How use innerHTML with div tag?

  To append using the innerHTML attribute, first select the element [div] where you want to append the code. Then, add the code enclosed as strings using the += operator on innerHTML.