我有元素 E，我正在向它附加一些元素。突然发现下一个元素应该是E的第一个子元素，有什么诀窍，怎么做？方法 unshift 不起作用，因为 E 是一个对象，而不是数组。
很长的路要遍历 E 的孩子并移动他们的 key++，但我确信有一个更漂亮的方法。
【问题讨论】：
标签： javascript jquery arrays dom elements
var eElement; // some E DOM instance
var newFirstElement; //element which should be first in E
eElement.insertBefore(newFirstElement, eElement.firstChild);
【讨论】：
prepend
parent.prepend(newChild) // [newChild, child1, child2]
这是现代 JS！它比以前的选项更具可读性。它目前在 Chrome、FF 和 Opera 中可用。
添加到末尾的等价物是append，替换旧的appendChild
parent.append(newChild) // [child1, child2, newChild]
...）。示例：
parent.prepend(newChild, "foo") // [newChild, "foo", child1, child2]
const list = ["bar", newChild]
parent.append(...list, "fizz") // [child1, child2, "bar", newChild, "fizz"]
【讨论】：
.appendChild()，但将它添加到开头是.prepend()，而不是坚持惯例并称之为.prependChild()
append() 也存在，工作方式与prepend() 相同，但在最后
prepend 的问题时，我也感到困惑，而我发现它已经是那样了。 :( 好吧，过去不存在。
append？对于 backcompat，显然不能直接删除 appendChild。
你可以使用
targetElement.insertAdjacentElement('afterbegin', newFirstElement)
来自MDN：
insertAdjacentElement() 方法将给定元素节点插入到相对于调用它的元素的给定位置。
位置
一个 DOMString 表示相对于元素的位置；必须是以下字符串之一：beforebegin：在元素本身之前。afterbegin：就在元素内部，在它的第一个子元素之前。beforeend：就在元素内部，之后它的最后一个子元素。afterend: 在元素本身之后。元素
要插入到树中的元素。
insertAdjacent 的家族中也有兄弟方法：
element.insertAdjacentHTML('afterbegin','htmlText') 用于直接注入 html 字符串，如 innerHTML 但不会覆盖所有内容，因此您可以跳过 document.createElement 的压迫过程，甚至可以通过字符串操作过程构建整个组件
element.insertAdjacentText 用于将净化字符串注入元素。没有了encode/decode
【讨论】：
element typeof document-fragment 没有insertAdjacent...()。在我们有更好的答案之前，您最好的猜测是将 fragment 附加到 div 。进行 dom 操作，然后使用 Range.selectNodeContents() 和 Range.extractContents() 取回片段
您可以在所有窗口 html 元素中直接实现它。
像这样：
HTMLElement.prototype.appendFirst = function(childNode) {
if (this.firstChild) {
this.insertBefore(childNode, this.firstChild);
}
else {
this.appendChild(childNode);
}
};
【讨论】：
prepend 是原版 JS 的等价物，不需要原型。它将在 ES7 中成为标准，如果可能，您应该在您的应用程序中使用它
null 作为insertBefore 中的参考元素传递，不需要上面的分支。
将接受的答案重构为函数：
function prependChild(parentEle, newFirstChildEle) {
parentEle.insertBefore(newFirstChildEle, parentEle.firstChild)
}
【讨论】：
eElement 是什么才有意义。为此，我需要阅读这个问题。大多数时候，我只是检查标题并直接进入答案，而忽略了问题的详细信息。
除非我有误解：
$("e").prepend("<yourelem>Text</yourelem>");
或者
$("<yourelem>Text</yourelem>").prependTo("e");
虽然从你的描述中听起来像是附加了一些条件，所以
if (SomeCondition){
$("e").prepend("<yourelem>Text</yourelem>");
}
else{
$("e").append("<yourelem>Text</yourelem>");
}
【讨论】：
我认为您正在寻找 jQuery 中的 .prepend 函数。示例代码：
$("#E").prepend("<p>Code goes here, yo!</p>");
【讨论】：
我创建了这个原型来将元素添加到父元素。
Node.prototype.prependChild = function (child: Node) {
this.insertBefore(child, this.firstChild);
return this;
};
【讨论】：
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>
【讨论】：