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

Question

希望大家都好好的

当我遇到这个错误时，我正在使用 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");

谢谢

Answer 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>

Answer 2

id="last" 的

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

元素的子元素。

第二个问题是

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

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

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

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