javascript - 更改parentNode.innerHTML后，无法访问parentNode

Question

假设我有以下 DOM 结构和脚本

var test = document.getElementById('test');
test.parentNode.innerHTML += 'hello';
console.log(test.parentNode); // null
console.log(document.getElementById('test').parentNode); // normal result

<div>
<div id="test"></div>
</div>

正如上面的脚本所说，第一个输出 null 而第二个输出实际节点，有谁知道为什么第一个输出 null 而不是正常节点？

Answer 1

重置 innerHTML 属性后，浏览器解析设置的内容并创建新 元素。 test 变量不引用同样具有 test id 的新元素。原始 test 元素与 DOM 分离，没有父元素。 test 和 document.getElementById('test') 引用不同的 DOM 元素对象。

改用createTextNode 和appendChild 方法看看区别:

var test = document.getElementById('test');
test.parentNode.appendChild(document.createTextNode('hello'));
console.log(test.parentNode);