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

Posted 2023-02-21

【中文标题】使用 javascript 的 .insertBefore 将项目作为最后一个子项插入

【英文标题】：using javascript's .insertBefore to insert item as last child

【发布时间】：2011-07-07 14:38:07

【问题描述】：

我非常想念 jQuery。我正在做一个项目，我需要再次使用好的 'ol plain 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，因为我现在正试图访问一个不存在的数组索引。

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

但这合适吗？我现在正在一些现代浏览器中对其进行测试，似乎没有任何不良影响。有没有更好的办法？

【问题讨论】：

为什么不使用 .appendChild？

我们可以在这里调整接受的答案吗？ @Gibolt 为当前标准提供了最合适的答案，并将极大地帮助任何未来的读者。

【参考方案1】：

现代解决方案

如果您想根据child进行定位，只需使用before 或after

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 文档

before - after

prepend - append

我可以使用 - 95% Mar 2021

【讨论】：

非常感谢您！我觉得这在当前标准中并不为人所知，现在这应该是公认的答案。它被所有主要的非旧版（意味着不包括 IE，但谁在乎）浏览器接受。

【参考方案2】：

我得到这个代码是为了将链接项作为最后一个子项插入

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

【参考方案3】：

纯 JavaScript 实际上有一种方法可以满足您的需求：

parent.appendChild(child_to_be_last)

【讨论】：

这似乎是最合适的方法

【参考方案4】：

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

【参考方案5】：

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

parentNode.insertBefore(newNode, referenceNode.nextSibling);

【参考方案6】：

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

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

由于myNodes[i+1] 超出了数组边界，它返回undefined，在这种情况下被视为null。这意味着你得到了你想要的行为。

编辑：Link to the W3 specification of insertBefore()

【讨论】：

很高兴知道！我想这是完全有效的。

虽然这确实有效，但对于任何未来的读者：查看@Gibolt 提供的答案，因为如果您不需要支持旧版浏览器，这是最新且最直观的方法作为 IE。