Replace Child 给出错误（未能在节点上执行“replacechild”）？

Posted 2023-03-11

【中文标题】Replace Child 给出错误（未能在节点上执行“replacechild”）？

【英文标题】：Replace Child giving error (failed to execute "replacechild" on node)?

【发布时间】：2022-01-22 19:02:24

【问题描述】：

希望大家都好好的

当我遇到这个错误时，我正在使用 replacechild：

未捕获的 DOMException：无法在“节点”上执行“replaceChild”：要替换的节点不是该节点的子节点。

但我看到代码没问题，我找不到任何问题

代码如下：

javascript 代码：

let list = document.getElementById("List");
list.replaceChild(text2, document.getElementById("last"));

html 代码：

<ol id="List">
  <li><div class="child" id="first">Child 1</div></li>
  <li><div class="child" id="Second">Child 2</div></li>
  <li><div class="child">Child 3</div></li>
  <li><div class="child" id="last">Child 4</div></li>
</ol>

我用来替换 child 的文本：

let text2 = document.createTextNode("This is a heading");

谢谢

【参考方案1】：

id = "last" 元素不是id = "List" 元素的子元素。请注意，它们之间有一个li 元素。 根据documentation，被替换的元素必须是直接子元素。 示例如下：

const text = document.createTextNode("This is a heading");
const list = document.getElementById("list");
const selectedNode = document.getElementById("last");
selectedNode.parentElement.replaceChild(text, selectedNode);

<ol id="list">
  <li><div class="child" id="first">Child 1</div></li>
  <li><div class="child" id="Second">Child 2</div></li>
  <li><div class="child">Child 3</div></li>
  <li><div class="child" id="last">Child 4</div></li>
</ol>

【讨论】：

谢谢它有效所以同样的规则也适用于 removechild，对吧？

@BehindTheWebPage，removeChild、replaceChild、appendChild 等方法仅适用于“parentNode childNode”方案。这在（MDN 文档）[developer.mozilla.org/en-US/docs/Web/API/Node#methods].如果你只是学习一门语言，我推荐阅读this public tutorial (link to github repository)。特别是在this section 中，您可以阅读有关在 DOM 模型中移动的信息。我很高兴为您提供帮助。

【参考方案2】：

id="last" 的

元素不是 id 为 "list" 的元素的子元素。它是最后一个 元素的子元素。

第二个问题是

允许的子级只有 。 您不能将其替换为文本节点。

如果你想简单地改变最后一个 li 的文本，你应该使用类似的东西。

document.getElementById("last").innerHTML = "This is a heading";

但这不会使它成为标题，只是更改文本。 在我看来，你应该更多地学习 html 和 DOM 来理解这些概念。

【讨论】：

谢谢@Nikes 你能分享一些我可以了解更多关于这些的资源吗？因为我刚刚开始学习 Javascript 和 Html

肯定的事情@BehindTheWebPage 其中一个很棒的工具是w3schools.com/html/default.asp，您会在其中找到分步教程以及“亲自尝试”为每一步准备的资源。