outerhtml

注意：与 innerHTML 不同，写入 outerHTML 不会改变元素。而是在 DOM 中替换它。

是的，听起来很奇怪，它确实很奇怪，这就是为什么我们在这里对此做了一个单独的注释。看一下。

考虑下面这个示例：

<div>Hello, world!</div>

<script>
  let div = document.querySelector('div');

  // 使用 <p>...</p> 替换 div.outerHTML
  div.outerHTML = '<p>A new element</p>'; // (*)

  // 蛤！'div' 还是原来那样！
  alert(div.outerHTML); // <div>Hello, world!</div> (**)
</script>

看起来真的很奇怪，对吧？

在 (*) 行，我们使用 <p>A new element</p> 替换 div 。在外部文档（DOM）中我们可以看到的是新内容而不是 <div> 。但是正如我们在 (**) 行所看到的，旧的 div 变量并没有被改变。

outerHTML 赋值不会修改 DOM 元素（在这个例子中是被 ‘div’ 引用的对象），而是将其从 DOM 中删除并在其位置插入新的 HTML。

所以，在 div.outerHTML=... 中发生的事情是：

• div 被从文档（document）中移除。
• 另一个 HTML 片段 <p>A new element</p> 被插入到其位置上。
• div 仍拥有其旧的值。新的 HTML 没有被赋值给任何变量。

在这儿很容易出错：修改 div.outerHTML 然后继续使用 div ，就好像它包含的是新内容一样。但事实并非如此。这样的东西对于 innerHTML 是正确的，但是对于 outerHTML 却不正确。

我们可以向 elem.outerHTML 写入内容，但是要记住，它不会改变我们所写的元素（‘elem’）。而是将新的 HTML 放在其位置上。我们可以通过查询 DOM 来获取对新元素的引用。