используя javascript .insertBefore для вставки элемента как последнего потомка

Question

Я так скучаю по jQuery.Я работаю над проектом, в котором мне нужно снова испачкать свои руки хорошим и простым Javascript.

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

parent
    child1
    child2
    child3

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

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

parent.insertBefore(newNode, child3)

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

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

То есть вставка моего нового узла перед следующим узлом-родителем каждого из моих узлов (это означает, что он ставит его после каждого узла).

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

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

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

Answer 1

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

parent.appendChild(child_to_be_last)

Answer 2

Функциональность insertBefore(newNode, referenceNode) описывается следующим образом:

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

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

Редактировать: Ссылка на спецификацию W3 для insertBefore ()

Answer 3

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

Answer 4

child1.before(newNode);

или

child1.after(newNode);

Вы можете напрямую добавлять дочерние элементы до или после элемента в ES5 +, который в настоящее время поддерживается 70%браузеры

Ссылки:

Документы Mozilla .before - .after

Можно ли использовать

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

Answer 6

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

parentNode.insertBefore(newNode, referenceNode.nextSibling);