Используя javascript.insertBefore, чтобы вставить элемент в качестве последнего дочернего элемента

Я так скучаю по jQuery. Я работаю над проектом, где мне нужно, чтобы мои руки были грязными с хорошим "простым Javascript".

У меня такой сценарий:

parent
    child1
    child2
    child3

Через javascript я хочу иметь возможность вставлять новый node до или после любого из этих детей. В то время как javascript имеет insertBefore, нет insertAfter.

Вставить перед тем, как будет работать над этим выше, вставить node перед любым из них:

parent.insertBefore(newNode, child3)

Но как вставить node ПОСЛЕ child3? Я использую это в данный момент:

for (i=0,i<myNodes.length,i++){
    myParent.insertBefore(newNode, myNodes[i+1])
}

Это вставляет мой newNode перед следующим sibling node каждого из моих узлов (это означает, что он помещает его после каждого node).

Когда он дойдет до последнего node, myNodes[i+1] станет undefined, поскольку теперь я пытаюсь получить доступ к индексу массива, который не существует.

Я бы подумал, что это будет ошибкой, но похоже, что в этой ситуации все отлично работает, мой node действительно вставлен после последнего node.

Но так ли это? Я тестирую его сейчас в нескольких современных браузерах без каких-либо явно неблагоприятных эффектов. Есть ли лучший способ?

Ответы

Ответ 1

Функциональность insertBefore(newNode, referenceNode) описывается как:

Вставляет указанный node перед ссылкой node как дочерний элемент текущего node. Если referenceNode имеет значение null, то newNode вставляется в конец списка дочерних узлов.

И поскольку myNodes[i+1] находится за пределами границ массива, он возвращает undefined, который в этом случае рассматривается как null. Это означает, что вы получаете желаемое поведение.

Изменить: Ссылка на спецификацию W3 для insertBefore()

Ответ 2

Pure JavaScript на самом деле имеет метод для того, что вы хотите:

parent.appendChild(child_to_be_last)

Ответ 3

Чтобы вставить элемент в качестве последнего node, используйте: parentNode.insertBefore(newNode, null);

Ответ 4

Также, если это не повторение через дочерние элементы (просто вставка после referenceNode), это может быть полезно:

parentNode.insertBefore(newNode, referenceNode.nextSibling);

Ответ 5

У меня этот код работает, чтобы вставить элемент ссылки в качестве последнего дочернего

var cb=function(){
    //create newnode
    var link=document.createElement('link');
    link.rel='stylesheet';link.type='text/css';link.href='css/style.css';

    //insert after the lastnode
    var nodes=document.getElementsByTagName('link'); //existing nodes
    var lastnode=document.getElementsByTagName('link')[nodes.length-1]; 
    lastnode.parentNode.insertBefore(link, lastnode.nextSibling);
};

var raf=requestAnimationFrame||mozRequestAnimationFrame||
    webkitRequestAnimationFrame||msRequestAnimationFrame;
if (raf)raf(cb);else window.addEventListener('load',cb);