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

那就是在我的每个节点的下一个兄弟节点之前插入我的newNode(意味着它将它放在每个节点之后).

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

我认为'错误了,但似乎工作得很好,在那种情况下,我的节点确实插在最后一个节点之后.

但那是对的吗？我现在正在几个现代浏览器中测试它,看起来没有看似不好的效果.有没有更好的办法？

Answer 1

纯JavaScript实际上有一个你想要的方法:

parent.appendChild(child_to_be_last)

Answer 2

功能insertBefore(newNode, referenceNode)描述如下:

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

并且因为myNodes[i+1]它在数组边界之外,所以它返回undefined,null在这种情况下被视为处理.这意味着您可以获得所需的行为.

编辑:链接到insertBefore()的W3规范

Answer 3

现代解决方案

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

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

如果您想基于parent进行定位，请使用prepend或append

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

高级用法

1. 您可以传递多个值（或使用扩展运算符...）。
2. 任何字符串值都将作为文本元素添加。

例子：

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

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

Mozilla 文档

之前-之后

前置-附加

我可以使用 - 95% 2021 年 3 月

Answer 4

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