使用 javascript 的 .insertBefore 将项目作为最后一个孩子插入
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5173545/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
using javascript's .insertBefore to insert item as last child
提问by DA.
I so miss jQuery. I'm working on a project where I need to get my hands dirty with good 'ol plain Javascript again.
我好怀念 jQuery。我正在做一个项目，我需要再次使用好的 'ol 纯 Javascript 来弄脏我的手。
I have this scenario:
我有这个场景：
parent
child1
child2
child3
Via javascript, I want to be able to insert a new node before or after any of those children. While javascript has an insertBefore, there is no insertAfter.
通过 javascript，我希望能够在这些子节点之前或之后插入一个新节点。虽然 javascript 有一个insertBefore，但没有insertAfter.
Insert before would work fine on the above to insert a node before any one of those:
在上面插入之前可以正常工作以在其中任何一个之前插入一个节点：
parent.insertBefore(newNode, child3)
But how does one insert a node AFTER child3? I'm using this at the moment:
但是如何在 child3 之后插入一个节点呢？我现在正在使用这个：
for (i=0,i<myNodes.length,i++){
myParent.insertBefore(newNode, myNodes[i+1])
}
That is inserting my newNode before the next sibling node of each of my nodes (meaning it's putting it after each node).
那就是在我的每个节点的下一个兄弟节点之前插入我的 newNode （意味着它把它放在每个节点之后）。
When it gets to the last node, myNodes[i+1]become undefinedas I'm now trying to access a array index that doesn't exist.
当它到达最后一个节点，myNodes[i+1]成为undefined因为我现在正试图访问一个不存在的数组索引。
I'd think that'd error out, but it seems to work fine in that in that situation, my node is indeed inserted after the last node.
我认为那会出错，但在那种情况下它似乎工作正常，我的节点确实插入在最后一个节点之后。
But is that proper? I'm testing it now in a few modern browsers with no seemingly ill effects. Is there a better way?
但这样合适吗？我现在正在一些现代浏览器中对其进行测试，似乎没有任何不良影响。有没有更好的办法？
回答by Robert Siemer
Pure JavaScript actually has a method for what you want:
纯 JavaScript 实际上有一个你想要的方法：
parent.appendChild(child_to_be_last)
parent.appendChild(child_to_be_last)
回答by Elian Ebbing
The functionality of insertBefore(newNode, referenceNode)is described as:
的功能insertBefore(newNode, referenceNode)描述为：
Inserts the specified node before a reference node as a child of the current node. If
referenceNodeis null, thennewNodeis inserted at the end of the list of child nodes.
在引用节点之前插入指定节点作为当前节点的子节点。如果
referenceNode为空，则newNode插入到子节点列表的末尾。
And since myNodes[i+1]is outside of the array bounds, it returns undefined, which is treated as nullin this case. This means you get your desired behavior.
并且由于myNodes[i+1]在数组边界之外，它返回undefined，null在这种情况下被视为。这意味着你得到了你想要的行为。
回答by devildrey33
To insert item as a last node use :parentNode.insertBefore(newNode, null);
要将项目作为最后一个节点插入，请使用：parentNode.insertBefore(newNode, null);
回答by Gibolt
回答by Chetabahana
I got this code is work to insert a link item as the last child
我得到这个代码是为了插入一个链接项作为最后一个孩子
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);
回答by Zajo
Also when not iterating through children (just inserting after referenceNode) this might be useful:
此外，当不遍历子项（仅在 之后插入referenceNode）时，这可能很有用：
parentNode.insertBefore(newNode, referenceNode.nextSibling);
