Uncaught NotFoundError: Failed to execute 'insertBefore' on 'Node': The node before which the new node is to be inserted is not a child of this node

Question

I am having an issue with Javascript. I'm getting this error message:

Uncaught NotFoundError: Failed to execute 'insertBefore' on 'Node': The node before which the new node is to be inserted is not a child of this node.

Javascript:

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); 

It is trying to add a <video> tag below a div called othersarea.

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

How do I fix this?

I also want to run attachMediaStream([VIDEO TAG HERE HOW?], event.stream); on my new video tag.

Answer 1

You have to call insertBefore on the parent element of the element you're inserting before. document.body is not the parent, it's far up in the DOM hierarchy.

And to insert after a DIV, you have to insert before its next sibling.

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

See the examples in MDN

Answer 2

Try using the parentNode:

originalDiv.parentNode.insertBefore(newVideo, originalDiv); 

This will insert newVideo directly in front of the originalDiv.

The reason is that node.insertBefore(newNode, existingNode) uses node as a reference to the element that surrounds the existingNode.

Ref: http://www.w3schools.com/jsref/met_node_insertbefore.asp

It's also what Google Analytics does: http://www.stevesouders.com/blog/2010/05/11/appendchild-vs-insertbefore/

Answer 3

First of all, be sure which element is your parent element.

In your case, you have an HTML code like this

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

Here <div id="remoteVideos"></div> is your parent element, under this elemnt your have few more elments such as <div class="title"></div> and <div id="othersarea"></div> which are child of <div id="remoteVideos"></div> element. Aditionally, you have <h2>Others</h2> elemnt which is child of <div class="title"></div> element and now <div class="title"></div> is parent element to <h2>Others</h2>. Once you understand which is child element and which one is parent element you will never get this error.

Now you can simply select the parent element specifically.

const remoteParentElement = document.getElementById('remoteVideos');
const originalDiv = document.getElementById("othersarea");
remoteParentElement.insertBefore(newVideo, originalDiv);

Or you can also get the parent element with the parent node.

const originalDiv = document.getElementById("othersarea");
originalDiv.parentNode.insertBefore(newVideo, originalDiv);