JavaScript outerHTML function 的行为如何？

Question

我刚刚开始了解 DOM Web API 和 outerHTML function 的行为对我来说似乎有点奇怪。

这是我的代码：

const heading = document.getElementById('heading');
heading.innerHTML = 'This is a <span>Heading</span>';
console.log(heading.innerHTML);
heading.outerHTML = '<h2>Hello World!</h2>';
console.log(heading.outerHTML);

Output：

This is a <span>Heading</span>
<h1 id="heading">This is a <span>Heading</span></h1>

据我所知，DOM 更改是同步发生的，因此我希望第二个日志的结果是<h2>Hello World!</h2>但 output 非常令人困惑。

Answer 1

好的，让我们尝试逐步给出答案。

• 首先，您获得 ele.net 的“标题”ID 并将其分配给标题变量。
• 设置标题元素的 innerHTML（'This is a Head...）
• 记录标题元素的 innerHTML。
• 设置标题元素的 outherHTML (Hello World... 用 DOM 中的新元素替换标题元素
• 记录标题元素的 otherHTML。 但是，标题元素已在 DOM 中被替换。 OutherHTML 属性指的是元素的序列化 HTML，因为它是以前的，这就是为什么你在 output 中看到原始标签 h1。

为了得到你想要的，你可以尝试使用 DOM 定义一个新变量：

const heading2 = document.getElementById('heading');
console.log(heading2.outerHTML);

这将为您提供您正在寻找的 output。