Html-DOM 内容的 API 接口

Web 开发者可能会使用 jQuery .html() 和 .text() 方法来设置 DOM 内容，但他们的实现仍然依赖于 DOM API。 本文来梳理一下这些用来获取 DOM 内容的 DOM 属性（attribute）， 比较它们的区别： innerHTML , outerHTML , innerText , outerText , text , textContent ， 以及 jQuery 中 .html() 和 .text() 的实现。

innerHTML/outerHTML

outerHTML 和 innerHTML DOM 属性用来设置 DOM 的 HTML 内容。 其中 innerHTML 返回元素内容的 HTML 片段，而 outerHTML 返回的 HTML 片段则包括元素本身、以及元素内容的。 其中 innerH 常常用于清空元素内容。

document.body.innerHTML = '';

需要注意 innerHTMl 设置的脚本内容将不会被执行，参考 在 DOM 中动态插入并执行脚本 。

innerText/outerText

与 innerHTML , outerHTML 相同，inner 只会设置内容而 outer 会更改整个元素。 不同的是， innerText 与 outerText 则用来获取和设置渲染后的结果。 例如设置的 HTML 特殊字符会被转义，换行会被解析为
。例如：

document.body.innerText = '
header
\nparagraph'

的渲染结果为：

header
paragraph

利用 innerText 可以方便地进行 HTML 转义：

function escape(str){
  var el = document.createElement('div');
  el.innerText = str;
  return el.innerHTML;
}

// 返回 

escape('
');

text/textContent

textContent 与 innerText 表现相似，但有一些细节不同：

• textContent 是定义在 Node 上的，Element 继承了该属性。
• textContent 可以获取不渲染的内容而 innerText 不可以。包括