JavaScript outerHTML属性行为解惑：修改后输出为何不符合预期？

你遇到的问题核心在于outerHTML设置后，原变量指向的是已被移除的旧DOM元素，而非新替换的元素。

代码执行过程拆解： #

1. const heading = document.getElementById('heading');
   这里获取到的是页面中原本的<h1 id="heading">元素，变量heading始终指向这个旧元素。
2. heading.innerHTML = 'This is a <span>Heading</span>';
   同步更新了旧h1元素的内部内容，此时DOM中的h1内容已变化，所以第一个console.log输出正确。
3. heading.outerHTML = '<h2>Hello World!</h2>';
   这一步的操作是：将旧h1元素从DOM树中移除，用新的<h2>Hello World!</h2>替换它的位置。但变量heading仍然指向那个已经被移除的旧h1元素，并没有自动指向新的h2元素。
4. console.log(heading.outerHTML);
   此时访问的是旧h1元素的outerHTML属性，这个元素已经不在DOM中，但变量还保留着对它的引用，它的属性值并没有被修改，所以输出的还是旧h1的完整HTML内容。

验证预期结果的方法： #

如果想获取新替换元素的outerHTML，需要重新从DOM中选择它：

const heading = document.getElementById('heading');
heading.innerHTML = 'This is a <span>Heading</span>';
console.log(heading.innerHTML);
heading.outerHTML = '<h2>Hello World!</h2>';
// 重新获取新的h2元素
const newHeading = document.querySelector('h2');
console.log(newHeading.outerHTML); // 输出: <h2>Hello World!</h2>

内容的提问来源于stack exchange，提问作者A . R . B