javascript - 正确使用 insertBefore() 的方法

Question

我正在尝试使用 insertBefore 添加一个元素，但它不起作用。

这两个代码有什么区别？为什么一个工作而另一个不工作。

工作代码：https ://www.w3schools.com/code/tryit.asp?filename=G7KF9MQKIA2C

不工作：https ://www.w3schools.com/code/tryit.asp?filename=G7KF978GWI24

当 insertBefore 在没有父 div 的情况下使用时，它似乎能够找到我想要的 div 的 ID。我目前正在尝试将其用于更复杂的文件，但它无法正常工作，它显示“找不到节点”。

标签： javascript

Answer 1

父子连接对于该功能的工作很重要

insertBefore() 方法在您指定的现有子节点之前插入一个节点作为子节点。

您不起作用的代码将像这样工作（再次参见定义）。一个有效的方法是因为父 html 元素是 body html 元素。

<div id="parent">
  <div id="A"> 

  a
  </div>
  <div id="B"> 
  b

  </div>
  <div id="C"> 
  c

  </div>
</div>
<script>

var newDiv = document.createElement("div"); 
newDiv.innerHTML = "asdf";
newDiv.id = "idtest";

var currentDiv = document.getElementById("B"); 
document.getElementById('parent').insertBefore(newDiv, currentDiv); 
</script>