HTML DOM 元素 innerHTML

示例

获取 id="myP" 的元素的 HTML 内容：

let html = document.getElementById("myP").innerHTML;

亲自试一试 »

更改 id="demo" 元素的 HTML 内容：

document.getElementById("demo").innerHTML = "I have changed!";

亲自试一试 »

获取 id="myList" 的 <ul> 元素的 HTML 内容：

let html = document.getElementById("myList").innerHTML;

亲自试一试 »

删除 id="demo" 的 <p> 元素的 HTML 内容：

element.innerHTML = "";

亲自试一试 »

下面有更多示例。

描述

这个innerHTML属性设置或返回元素的 HTML 内容（内部 HTML）。

也可以看看：

内部文本属性

textContent 属性

之间的差异
innerHTML、innerText 和 textContent

见下文

语法

返回innerHTML属性：

element.innerHTML

设置innerHTML属性：

element.innerHTML = text

适当的值

属性	描述
字符串	HTML 内容。

返回值

类型	描述
字符串	元素的 HTML 内容。

之间的差异
innerHTML、innerText 和 textContent

innerHTML 属性返回：
元素的文本内容，包括所有间距和内部 HTML 标记。

innerText 属性返回：
仅元素及其所有子元素的文本内容，没有 CSS 隐藏文本间距和标签，<script> 和 <style> 元素除外。

textContent 属性返回：
元素及其所有后代的文本内容，带有间距和 CSS 隐藏文本，但没有标签。

HTML 示例

<p id="myP"> This element has extra spacing and contains <span>a span element</span>.</p>

JavaScript 示例

let text = document.getElementById("myP").innerText;

let text = document.getElementById("myP").innerHTML;

let text = document.getElementById("demo").textContent;

亲自试一试 »

在上面的例子中：

innerText 属性返回：
该元素具有额外的间距并包含一个 span 元素。

innerHTML 属性返回：
该元素具有额外的间距并包含<span>一个span元素</span>。

textContent 属性返回：
该元素具有额外的间距并包含一个 span 元素。

浏览器支持

element.innerHTML所有浏览器都支持：


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

HTML DOM 元素 innerHTML

示例

描述

也可以看看：

之间的差异innerHTML、innerText 和 textContent

语法

适当的值

返回值

更多示例

示例

示例

示例

之间的差异innerHTML、innerText 和 textContent

HTML 示例

JavaScript 示例

浏览器支持

之间的差异
innerHTML、innerText 和 textContent

之间的差异
innerHTML、innerText 和 textContent