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

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

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

parent
    child1
    child2
    child3

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

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

parent.insertBefore(newNode, child3)

но как вставить узел после child3? Я использую это в данный момент:

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

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

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

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

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

6
dom javascript

6 ответов

функциональные возможности insertBefore(newNode, referenceNode) описано так:

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

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

Edit:ссылка на спецификацию W3 of insertBefore ()

17

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

parent.appendChild(child_to_be_last)

19

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

5

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

parentNode.insertBefore(newNode, referenceNode.nextSibling);
0

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

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

child1.before(newNode);

или

child1.after(newNode);

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

ссылки:

Mozilla Docs .до - .после

Могу Ли Я Использовать

0