innerHTML、outerHTML、innerText、outerText 的用法与区别 - js 笔记

关于这几个元素在 js 中还是很实用的，我在这里记录一下 innerHTML、outerHTML、innerText、outerText 等的用法和他们之间的区别，方便各位在实际开发中使用。

• 代码来源：详情

1
<div id="test">
2
      <span style="color:red">test1</span> test2
3
</div>

在 JS 中可以使用：

test.innerHTML:

　　也就是从对象的起始位置到终止位置的全部内容,包括 Html 标签。

　　上例中的 test.innerHTML 的值也就是“<span style="color:red">test1</span> test2 ”。

test.innerText:

　　从起始位置到终止位置的内容, 但它去除 Html 标签

　　上例中的 text.innerText 的值也就是“test1 test2”, 其中 span 标签去除了。

test.outerHTML:

除了包含 innerHTML 的全部内容外, 还包含对象标签本身。

　　上例中的 text.outerHTML 的值也就是<div id="test"><span style="color:red">test1</span> test2</div>

test.outerText:

设置(包括标签)或获取(不包括标签)对象的文本 。

完整示例：

1
<div id="test">
2
      <span style="color:red">test1</span> test2
3
</div>
4

5
<a href="javascript:alert(test.innerHTML)">innerHTML内容</a>
6
<a href="javascript:alert(test.innerText)">innerText内容</a>
7
<a href="javascript:alert(test.outerHTML)">outerHTML内容</a>

innerHTML 是符合 W3C 标准的属性，而 innerText 只适用于 IE 浏览器，因此，尽可能地去使用 innerHTML，而少用 innerText，如果要输出不含 HTML 标签的内容，可以使用 innerHTML 取得包含 HTML 标签的内容后，再用正则表达式去除 HTML 标签，下面是一个简单的符合 W3C 标准的示例：

1
<a href="javascript:alert(document.getElementById('test').innerHTML.replace(/<.+?>/gim,''))">无HTML,符合W3C标准</a>

下面分享一个在实际开发中使用的例子：