HTML DOM 元素的 innerHTML
示例
获取 id="myP" 的元素的 HTML 内容
let html = document.getElementById("myP").innerHTML;
自己动手试一试 »
更改 id="demo" 的元素的 HTML 内容
document.getElementById("demo").innerHTML = "我已更改!";
自己动手试一试 »
获取 id="myList" 的 <ul> 元素的 HTML 内容
let html = document.getElementById("myList").innerHTML;
自己动手试一试 »
删除 id="demo" 的 <p> 元素的 HTML 内容
element.innerHTML = "";
自己动手试一试 »
更多示例见下文。
描述
innerHTML
属性设置或返回元素的 HTML 内容(内部 HTML)。
innerHTML、innerText 和 textContent 之间的差异
innerHTML、innerText 和 textContent
请参阅下方
语法
返回 innerHTML 属性
元素.innerHTML
设置 innerHTML 属性
元素.innerHTML = 文本
属性值
属性 | 描述 |
字符串 | HTML 内容。 |
返回值
类型 | 描述 |
字符串 | 元素的 HTML 内容。 |
更多示例
示例
更改两个元素的 HTML 内容
let text = "你好 Dolly。";
document.getElementById("myP").innerHTML = text;
document.getElementById("myDIV").innerHTML = text;
自己动手试一试 »
示例
更改链接的 HTML 内容和 URL
element.innerHTML = "W3Schools";
element.href = "https://w3schools.org.cn";
自己动手试一试 »
innerHTML、innerText 和 textContent 之间的差异
innerHTML、innerText 和 textContent
innerHTML 属性返回 元素的文本内容,包括所有空格和内部 HTML 标签。 |
innerText 属性返回 仅元素的文本内容及其所有子元素,不包括 CSS 隐藏的文本、空格和标签,除了 <script> 和 <style> 元素。 |
textContent 属性返回 元素及其所有后代元素的文本内容,包括空格和 CSS 隐藏的文本,但不包括标签。 |
HTML 示例
<p id="myP"> 此元素有额外的空格 并包含 <span>一个 span 元素</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 |
是 | 是 | 是 | 是 | 是 | 是 |