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

我非常想念jQuery。我正在做一个项目，在这个项目中，我需要再一次用好的“ol”纯Javascript把我的手弄脏

我有这样一个场景：

parent
    child1
    child2
    child3

通过javascript，我希望能够在这些子节点之前或之后插入一个新节点。虽然javascript有一个

插入器before

，但没有

插入器before

“在之前插入”可以很好地处理上述问题，即在以下任一项之前插入节点：

parent.insertBefore(newNode, child3)

但是如何在child3之后插入节点呢？我现在正在使用这个：

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

---

for（i=0，iinsertBefore（newNode，referenceNode）

的功能描述如下：

将指定节点作为当前节点的子节点插入到引用节点之前。如果

referenceNode

为空，则在子节点列表的末尾插入

newNode

由于

myNodes[i+1]

在数组边界之外，因此它返回

undefined

，在本例中，它被视为

null

。这意味着您获得了所需的行为

---

编辑：

当不遍历子项时（仅在

引用节点之后插入），这可能有用：

parentNode.insertBefore(newNode, referenceNode.nextSibling);

要将项作为最后一个节点插入，请使用：
parentNode.insertBefore（newNode，null）；
纯JavaScript实际上有一种方法可以满足您的需要：

parent.appendChild（child\u to\u be\u last）
我得到了这个代码，可以插入一个链接项作为最后一个子项

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

现代解决方案
如果您想根据子项进行定位，只需在
之前或之后使用

child1.before(newNode)   // [newNode, child1, child2]
// or
child1.after(newNode)    // [child1, newNode, child2]

如果要基于父项进行定位，请使用
prepend
或
append

parent.prepend(newNode)  // [newNode, child1, child2]
// or
parent.append(newNode)   // [child1, child2, newNode]

高级用法
您可以传递多个值（或使用扩展运算符
…
）
任何字符串值都将作为文本元素添加
示例：

child1.after(newNode, "foo")     // [child1, newNode, "foo", child2]

const list = ["bar", newNode]
parent.prepend(...list, "fizz")  // ["bar", newNode, "fizz", child1, child2]

Mozilla文档
-

-

我可以使用-
为什么不使用.appendChild？我们可以在这里调整接受的答案吗？@Gibolt的答案最适合当前的标准，对任何未来的读者都会有很大帮助。很高兴知道！我想这是完全正确的。虽然这确实有效，但对于任何未来的读者来说：请查看@Gibolt提供的答案，因为它是最符合美国标准的答案p如果你不需要支持IE等传统浏览器，那么这是一种最新的、直观的方法。这似乎是最合适的方法。非常感谢你！我觉得这在当前的标准中不是很有名，这应该是公认的答案。所有主要的非传统浏览器都接受它（意思是不包括IE，但谁在乎呢），浏览器。