码农教程 - 一技在手,衣食无忧! tools

目录

HTML DOM Element innerHTML

❮ Previous ❮ Element Object Reference Next ❯

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.

See Also:

The innerText Property

The textContent Property

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 »

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 = "91xjr";
element.href = "https://www.91xjr.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 <script> and <style> 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

<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 »

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 <span>a span element</span>.
The textContent property returns:
   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
❮ Previous ❮ Element Object Reference Next ❯