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);

Answer 2

val + = b实际上与val = val + b相同。以这种方式编写时，您应该更加明显地重新创建父级内的所有元素。

如果你想在不破坏现有元素的情况下追加，请使用appendChild而不是innerhtml。

Answer 3

您的英文代码会说：

使用ID＆＃39; test＆＃39;
现在将DOM节点从DOM树中取出，并将其替换为带有文本<div id="test"></div>Hello的新节点（不是拼写错误，它将完全放入该字符串）。
现在告诉我你从树中取出的DOM节点的父节点（啊哈！但它不再在DOM中了！）
现在获得一个ID为＃34;测试＆＃34;的DOM节点的引用（它找到你在第二步中插入的东西。
显示该节点的父节点（没问题）

原始DOM节点＆＃39;测试＆＃39;仍在记忆中，但不再在文件中。您可以通过查看test.innerHTML来看到这一点，您会看到它仍然只包含原始文本，因为您正在查看内存中的DOM节点。

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 4

以下一行：

test.parentNode.innerHTML += 'hello';

是：

的快捷方式

test.parentNode.innerHTML = test.parentNode.innerHTML + 'hello';

这意味着删除测试并替换为相同的标记+字符串"hello"。但是您的测试参考不再出现在文档中了。

你可以尝试

test.parentNode.appendChild(document.createTextNode('hello'));

Answer 5

在使用test.parentNode.innerHTML += 'hello';（等于test.parentNode.innerHTML = test.parentNode.innerHTML + 'hello';）附加html时，它实际上正在重新创建元素，因此，test（对元素的引用）在dom中不再可用。

使用 createTextNode 方法创建textNode，然后使用 appendChild 方法追加，以保留其他元素。

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

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

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

5 个答案: