Question

我通读https://developer.mozilla.org/en-US/docs/Web/API/Element/innerHTML，声称SyntaxError可能会发生。

dom = document.createElement('div')
// output: <div></div>
dom.innerHTML = '[try.various.strings.here]'
// output: "[try.various.strings.here]"
dom
// check final DOM

我尝试将测试字符串替换为<div>（部分），<div（已损坏）和<div></p>（不匹配）。从来没有遇到过异常。我想知道是否需要为它添加预检或保护（try..catch）。

Answer 1

TL; DR

规范说如果浏览器想要它可以，但我不认为任何主要的浏览器都这样做对于HTML （好吧，我不会对IE9-IE11和IE9做出任何保证）某些元素类型，实际上）。（虽然他们做的XML。）从HTML 5.2 specification中的HTML解析器的定义：

此规范定义HTML文档的解析规则，无论它们在语法上是否正确。解析算法中的某些点被称为解析错误。解析错误的错误处理是明确定义的（这是本规范中描述的处理规则），但是用户代理在解析HTML文档时可能会在解析器遇到的第一个解析错误时中止解析器不希望应用本规范中描述的规则。

（我的重点）

详细

DOM Parsing and Serialization spec定义innerHTML，并说：

在设置时，必须运行以下步骤：


让片段成为调用fragment parsing algorithm的结果，新值为标记，上下文对象为上下文元素

如果上下文对象是模板元素，那么让上下文对象成为模板的模板内容（DocumentFragment）。

将所有内容替换为上下文对象中的片段。

如果我们按照片段解析算法链接，我们将：

以下步骤构成片段解析算法，其参数为标记字符串和上下文元素：


如果上下文元素的节点文档是HTML文档：let algorithm为HTML fragment parsing algorithm。
如果上下文元素的节点文档是XML文档：让算法为XML fragment parsing algorithm。

让新子项成为调用算法的结果，其中标记作为输入，上下文元素为上下文元素。

让 fragment 成为一个新的DocumentFragment，其节点文档是 context element 的节点文档。

将新子项中的每个节点附加到片段（按树顺序）。

返回片段的值。

如果我们按照上面的 HTML解析算法链接，我们将获得创建和使用HTML解析器的步骤。如果我们按照HTML解析器定义的链接，我们将获得上面 TL; DR 中的第一个链接以及上面引用的文本。

Answer 2

可能发生错误。

基本上，它取决于内容类型以及浏览器的服务方式。

在传统情况下，它不会引发错误，但在某些边缘情况下，例如Uncaught SyntaxError: Failed to set the 'innerHTML' property on 'Element': The provided markup is invalid XML或this bug report中可以看到，错误将被触发。

最好将其包装在try..catch语句中。

分配innerHTML时是否会发生异常？

2 个答案:

TL; DR

详细