未捕获的 NotFoundError：无法在“节点”上执行“insertBefore”：要插入新节点的节点不是该节点的子节点

Question

我在使用 JavaScript 时遇到问题。我收到此错误消息：

未捕获的 NotFoundError：无法在“节点”上执行“insertBefore”：要插入新节点的节点不是该节点的子节点。

Java脚本：

 var vidCounter = 0;
vidCounter++;

var originalDiv;
var newVideo = document.createElement("video");

newVideo.setAttribute("name", vidCounter);
newVideo.setAttribute("autoplay", "true");
originalDiv = document.getElementById("othersarea");
document.body.insertBefore(newVideo, originalDiv);

它试图在名为 othersarea 的 div 下面添加一个 <video> 标签。

 <div id="remoteVideos">
  <div class="title">
    <h2>Others</h2>
  </div>
  <div id="othersarea"></div>
</div>

我该如何解决？

我还想在我的新视频标签上运行 attachMediaStream([VIDEO TAG HERE HOW?], event.stream); 。

原文由 KriiV 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

您必须在之前插入的元素的父元素上调用 insertBefore 。 document.body 不是父级，它位于 DOM 层次结构的最上层。

要在 DIV 之后插入，您必须在其下一个同级之前插入。

 var parentDiv = document.getElementById("remoteVideos");
parentDiv.insertBefore(newVideo, originalDiv.nextSibling);

请参阅 MDN 中的示例

原文由 Barmar 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

尝试使用 parentNode ：

 originalDiv.parentNode.insertBefore(newVideo, originalDiv);

这会将 newVideo 直接插入到 originalDiv 的前面。

原因是 node.insertBefore(newNode, existingNode) 使用 node 作为对围绕 existingNode 的元素的引用。

参考： http ://www.w3schools.com/jsref/met_node_insertbefore.asp

这也是谷歌分析所做的：http: //www.stevesouders.com/blog/2010/05/11/appendchild-vs-insertbefore/

原文由 Magne 发布，翻译遵循 CC BY-SA 3.0 许可协议