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.
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.
var eElement; // some E DOM instance
var newFirstElement; //element which should be first in E
eElement.insertBefore(newFirstElement, eElement.firstChild);
prependparent.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"]
您可以使用
targetElement.insertAdjacentElement('afterbegin', newFirstElement)
来自MDN：
insertAdjacentElement() 方法在相对于它被调用的元素的给定位置插入给定元素节点。
position
一个 DOMString 表示相对于元素的位置；必须是以下字符串之一：
beforebegin: 在元素本身之前。
afterbegin: 就在元素内部，在它的第一个子元素之前。
beforeend: 就在元素内部，在它的最后一个子元素之后。
afterend: 在元素本身之后。element
要插入到树中的元素。
在家族中insertAdjacent也有兄弟方法：
element.insertAdjacentHTML('afterbegin','htmlText')用于直接注入 html 字符串，喜欢innerHTML但不覆盖所有内容，因此您可以跳过压迫过程，document.createElement甚至可以通过字符串操作过程构建整个组件
element.insertAdjacentText用于将消毒字符串注入元素。不再encode/decode
您可以直接在所有窗口 html 元素中实现它。
像这样 ：
HTMLElement.prototype.appendFirst = function(childNode) {
if (this.firstChild) {
this.insertBefore(childNode, this.firstChild);
}
else {
this.appendChild(childNode);
}
};
接受的答案重构为一个函数：
function prependChild(parentEle, newFirstChildEle) {
parentEle.insertBefore(newFirstChildEle, parentEle.firstChild)
}
除非我误解了：
$("e").prepend("<yourelem>Text</yourelem>");
或者
$("<yourelem>Text</yourelem>").prependTo("e");
虽然从您的描述中听起来像是附加了一些条件，所以
if (SomeCondition){
$("e").prepend("<yourelem>Text</yourelem>");
}
else{
$("e").append("<yourelem>Text</yourelem>");
}
我认为您正在寻找.prepend jQuery 中的函数。示例代码：
$("#E").prepend("<p>Code goes here, yo!</p>");
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>
我创建了这个原型来将元素添加到父元素。
Node.prototype.prependChild = function (child: Node) {
this.insertBefore(child, this.firstChild);
return this;
};