Uncaught NotFoundError: Не удалось выполнить 'insertBefore' в 'Node': node, перед которым новый node должен быть вставлен, не является дочерним элементом этого node

У меня проблема с Javascript. Я получаю сообщение об ошибке:

Uncaught NotFoundError: Не удалось выполнить 'insertBefore' в 'Node': node, перед которым должен быть вставлен новый node, не является дочерним элементом этого 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);

Он пытается добавить тег <video> под div с именем othersarea.

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

Как это исправить?

Я также хочу запустить attachMediaStream([VIDEO TAG HERE HOW?], event.stream); в новом теге видео.

Ответ 1

Вы должны вызвать insertBefore в родительском элементе элемента, который вы вставляете ранее. document.body не является родительским, это намного выше в иерархии DOM.

И чтобы вставить после DIV, вы должны вставить перед своим следующим братом.

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

См. примеры в MDN

Ответ 2

Попробуйте использовать parentNode:

originalDiv.parentNode.insertBefore(newVideo, originalDiv);

Это будет вставлять newVideo непосредственно перед оригиналом.

Причина в том, что node.insertBefore(newNode, existingNode) использует node как ссылку на элемент, который окружает existingNode.

Ссылка: http://www.w3schools.com/jsref/met_node_insertbefore.asp

Это также то, что делает Google Analytics: http://www.stevesouders.com/blog/2010/05/11/appendchild-vs-insertbefore/