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])
}

即在我的每个节点的下一个兄弟节点之前插入我的newNode（意味着它将它放在每个节点之后）。

当它到达最后一个节点时，myNodes[i+1]变为undefined，因为我现在正在尝试访问不存在的数组索引。

我认为'错误了，但似乎工作正常，在那种情况下，我的节点确实插在最后一个节点之后。

但这是正确的吗？我现在正在几个现代浏览器中测试它，看起来没有看似不好的效果。还有更好的方法吗？

Answer 1

Pure JavaScript实际上有一个你想要的方法：

parent.appendChild(child_to_be_last)

Answer 2

insertBefore(newNode, referenceNode)的功能描述为：

在引用节点之前插入指定节点作为当前节点的子节点。如果referenceNode为null，则在子节点列表的末尾插入newNode。

由于myNodes[i+1]位于数组边界之外，因此返回undefined，在这种情况下将其视为null。这意味着您可以获得所需的行为。

修改：Link to the W3 specification of insertBefore()

Answer 3

要将项目作为最后一个节点插入，请使用：parentNode.insertBefore(newNode, null);

Answer 4

此外，当不通过子项进行迭代时（仅在referenceNode之后插入），这可能很有用：

parentNode.insertBefore(newNode, referenceNode.nextSibling);

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

child1.before(newNode);

或

child1.after(newNode);

您可以直接在ES5 +中的元素之前或之后添加子元素，目前70% of browsers支持

链接：

Mozilla文档.before - .after

Can I Use

使用javascript .insertBefore将项目作为最后一个子项插入

6 个答案: