Question

所以我有这个JS代码：

var pElt = document.createElement("p");
var aElt = document.createElement("a");
aElt.textContent = "Text";
aElt.href = "#";
pElt.appendChild(aElt);

aElt.style.color = "red";
pElt.innerHTML += "<span> and more text</span>";
//aElt.style.color = "red";

document.getElementById("content").appendChild(pElt);

console.log(aElt); // always show the red attribute

这里可能有一些答案，但我甚至无法描述这个问题;所以我选择了＃34;失去节点参考＆＃34;，即使它不是这里发生的事情。（编辑：事实上，这里发生了什么，愚蠢:)）

所以......请按原样尝试代码。它有效，链接是红色的，每个人都很开心。现在评论＆＃34; aElt.style.color =＆＃34; red＆＃34 ;;＆＃34;然后取消注释另一行，下面两行。

... 它不起作用，链接仍然显示为黑色。我认为链接到我的节点的指针要么不再有效，要么aElt被移动到不同的内存地址。但是当我键入＆＃34; console.log（aElt）＆＃34;时，它正确地输出节点（好吧......我认为它确实如此），所以我不知道为什么我不能在.innerHTML更改后访问它。

我感兴趣的是引擎盖下发生的事情：）

谢谢！

index.html：

<!DOCTYPE html>

<html>

    <head>
        <meta charset="utf-8"/>
        <title>Question!</title>
    </head>

    <body>
        <div id="content"></div>
        <script src="script.js"></script>
    </body>

</html>

Answer 1

当您通过设置覆盖innerHTML元素的内容时，您实际上将<a>转回HTML 文字，附加了（作为文本），然后在中重新创建新 DOM节点。您的旧参考仍然是指您创建的原始<a>。

您可以使用与创建相同的方式创建<a>，并将该节点附加到，而不是覆盖.innerHTML。

丢失节点参考？（JavaScript的）

1 个答案:

丢失节点参考？ （JavaScript的）

1 个答案:

丢失节点参考？（JavaScript的）