为什么不建议在 JavaScript中使用 innerHTML？

element.innerHTML

Element.innerHTML 属性设置或获取 HTML 语法表示的元素的后代。

备注： 如果一个 ``, ``, 或 `` 节点有一个文本子节点，该节点包含字符 (&), (<), 或 (>), innerHTML 将这些字符分别返回为 &, < 和 >。使用Node.textContent 可获取一个这些文本节点内容的正确副本。

如果要向一个元素中插入一段 HTML，而不是替换它的内容，那么请使用 insertAdjacentHTML() 方法。

语法

1
2

const content = element.innerHTML;
element.innerHTML = htmlString;

Copy to Clipboard

值

DOMString 包含元素后代的 HTML 序列。设置元素的 innerHTML 将会删除所有该元素的后代并以上面给出的 htmlString 替代。

例外

SyntaxError

当 HTML 没有被正确标记时，设置 innerHTML 将会抛出语法错误。

NoModificationAllowedError

当父元素是 Document 时，设置 innerHTML 将会提示不允许修改。

使用说明

innerHTML 属性可以用来检查当前页面自最初加载到当前的 HTML 源码的变化。

获取元素的 HTML

获取 innerHTML 会导致用户代理序列化 由元素后代组成的 HTML 或者 XML。返回结果字符串。

1

let contents = myElement.innerHTML;

Copy to Clipboard

查看元素内容节点的 HTML 标记。

备注： 返回的 HTML 或者 XML 片段是基于当前元素的内容生成的，所以返回的标记和格式可能与原始页面的标记不匹配。

替换元素的内容

设置 innerHTML 的值可以让你轻松地将当前元素的内容替换为新的内容。

举个例子来说，你可以通过文档 body 属性删除 body 的全部内容。

1

document.body.innerHTML = "";

Copy to Clipboard

下面这个例子，首先获取文档当前的 HTML 标记并替换 "<" 字符为 HTML 实体 "<"，从本质上来看，它是将 HTML 转换成原始文本，将其包裹在 `` 元素中。然后 innerHTML 的值被替换成新的字符串。最后，文档的内容被替换为页面显示源码。

1
2
3

document.documentElement.innerHTML = "<pre>" +
         document.documentElement.innerHTML.replace(/</g,"&lt;") +
            "</pre>";

Copy to Clipboard

其他：

当给 innerHTML 设置一个值的时候到底发生了什么？用户代理按照以下步骤：

1. 给定的值被解析为 HTML 或者 XML（取决于文档类型），结果就是 DocumentFragment 对象代表元素新设置的 DOM 节点。
2. 如果元素内容被替换成 [ 元素，