Javascript 如何将 DOM 元素设置为第一个子元素？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2007357/
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
How to set DOM element as the first child?
提问by Popara
I have element E and I'm appending some elements to it. All of a sudden, I find out that the next element should be the first child of E. What's the trick, how to do it? Method unshift doesn't work because E is an object, not array.
我有元素 E，我正在向它附加一些元素。突然，我发现下一个元素应该是E的第一个孩子。有什么技巧，怎么做？方法 unshift 不起作用，因为 E 是一个对象，而不是数组。
Long way would be to iterate trough E's children and to move'em key++, but I'm sure that there is a prettier way.
很长的路要走的是遍历 E 的孩子们并移动他们的 key++，但我相信有一种更漂亮的方法。
回答by nemisj
var eElement; // some E DOM instance
var newFirstElement; //element which should be first in E
eElement.insertBefore(newFirstElement, eElement.firstChild);
回答by pery mimon
2017 version
2017版
You can use
您可以使用
targetElement.insertAdjacentElement('afterbegin', newFirstElement)
From MDN:
来自MDN：
The insertAdjacentElement() method inserts a given element node at a given position relative to the element it is invoked upon.
position
A DOMString representing the position relative to the element; must be one of the following strings:beforebegin: Before the element itself.afterbegin: Just inside the element, before its first child.beforeend: Just inside the element, after its last child.afterend: After the element itself.element
The element to be inserted into the tree.
insertAdjacentElement() 方法在相对于调用它的元素的给定位置插入给定元素节点。
position
一个 DOMString 表示相对于元素的位置；必须是以下字符串之一：beforebegin: 在元素本身之前。afterbegin: 就在元素内部，在它的第一个子元素之前。beforeend: 就在元素内部，在它的最后一个子元素之后。afterend: 在元素本身之后。element
要插入到树中的元素。
Also in the family of insertAdjacentthere is the sibling methods:
在家族中insertAdjacent还有兄弟方法：
element.insertAdjacentHTML('afterbegin','htmlText')for inject html string directly, like innerHTMLbut without overide everything , so you can jump oppressive process of document.createElementand even build whole componet with string manipulation process
element.insertAdjacentHTML('afterbegin','htmlText')用于直接注入 html 字符串，就像innerHTML但不覆盖所有内容，因此您可以跳过压制过程，document.createElement甚至可以使用字符串操作过程构建整个组件
element.insertAdjacentTextfor inject sanitize string into element . no more encode/decode
element.insertAdjacentText用于将 sanitize 字符串注入 element 。不再encode/decode
回答by Gibolt
2018 version
2018版
parentElement.prepend(newFirstChild)
This is modern JS! It is more readable than previous options. It is currently available in Chrome, FF, and Opera.
这是现代JS！它比以前的选项更具可读性。它目前在 Chrome、FF 和 Opera 中可用。
P.S. You can directly prepend strings
PS 你可以直接在字符串前面加上
parentElement.prepend('This text!')
Can I Use- 94% May 2020
我可以使用吗- 94% 2020 年 5 月
回答by yorg
You can implement it directly i all your window html elements.
Like this :
您可以直接在所有窗口 html 元素中实现它。
像这样 ：
HTMLElement.prototype.appendFirst=function(childNode){
if(this.firstChild)this.insertBefore(childNode,this.firstChild);
else this.appendChild(childNode);
};
回答by Joseph Dykstra
Accepted answer refactored into a function:
接受的答案重构为一个函数：
function prependChild(parentEle, newFirstChildEle) {
parentEle.insertBefore(newFirstChildEle, parentEle.firstChild)
}
回答by James Wiseman
Unless I have misunderstood:
除非我误解了：
$("e").prepend("<yourelem>Text</yourelem>");
Or
或者
$("<yourelem>Text</yourelem>").prependTo("e");
Although it sounds like from your description that there is some condition attached, so
虽然从你的描述中听起来好像有一些附加条件，所以
if (SomeCondition){
$("e").prepend("<yourelem>Text</yourelem>");
}
else{
$("e").append("<yourelem>Text</yourelem>");
}
回答by Emil Vikstr?m
回答by Raza
I created this prototype to prepend elements to parent element.
我创建了这个原型来将元素添加到父元素。
Node.prototype.prependChild = function (child: Node) {
this.insertBefore(child, this.firstChild);
return this;
};
回答by Ilker Cat
var newItem = document.createElement("LI"); // Create a <li> node
var textnode = document.createTextNode("Water"); // Create a text node
newItem.appendChild(textnode); // Append the text to <li>
var list = document.getElementById("myList"); // Get the <ul> element to insert a new node
list.insertBefore(newItem, list.childNodes[0]); // Insert <li> before the first child of <ul>
