DOM元素节点属性outerHTML和innerHTML

前言

innerHTML是我们常用的一个修改某个元素内容的属性

outerHTML可能不太常用

两者有什么区别

假设一个多层级的节点入下面代码所示

<h2 id="注意事项">
<a href="#注意事项" title="Permalink to 注意事项">注意事项</a>
</h2>

输入代码

document.querySelector('#注意事项').innerHTML
'<a href="#注意事项" title="Permalink to 注意事项">注意事项</a>'

document.querySelector('#注意事项').outerHTML

'<h2 id="注意事项"><a href="#注意事项" title="Permalink to 注意事项">注意事项</a></h2>'

可以看出outerHTML比innerHTML多了一个当前层级的根元素。

那么意味着在修改的时候也是修改当前层级的根元素。

注意事项

注意事项就两点

第一是如果元素没有父元素，即如果它是文档的根元素，则设置其outerHTML属性将抛出一个带有错误代码 。

第二即是你使用了outerHTML修改了某个变量所执行的文档位置，但是这个变量指向不会发生变化