327

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.

4

9 回答 9

607
var eElement; // some E DOM instance
var newFirstElement; //element which should be first in E

eElement.insertBefore(newFirstElement, eElement.firstChild);
于 2010-01-05T16:35:09.723 回答
202

2018版——prepend

parent.prepend(newChild)  // [newChild, child1, child2]

这就是现代 JS!它比以前的选项更具可读性。它目前在 Chrome、FF 和 Opera 中可用。

添加到末尾的等价物是append,替换旧的appendChild

parent.append(newChild)  // [child1, child2, newChild]

高级用法

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

例子:

parent.prepend(newChild, "foo")   // [newChild, "foo", child1, child2]

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

相关 DOM 方法

  1. 阅读更多-child.beforechild.after
  2. 阅读更多-child.replaceWith

Mozilla 文档

我可以用吗

于 2017-05-08T00:22:22.637 回答
128

2017版

您可以使用

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

于 2017-04-12T16:00:00.410 回答
12

您可以直接在所有窗口 html 元素中实现它。
像这样 :

HTMLElement.prototype.appendFirst = function(childNode) {
    if (this.firstChild) {
        this.insertBefore(childNode, this.firstChild);
    }
    else {
        this.appendChild(childNode);
    }
};
于 2015-01-03T04:35:08.607 回答
7

接受的答案重构为一个函数:

function prependChild(parentEle, newFirstChildEle) {
    parentEle.insertBefore(newFirstChildEle, parentEle.firstChild)
}
于 2015-07-16T16:27:45.323 回答
5

除非我误解了:

$("e").prepend("<yourelem>Text</yourelem>");

或者

$("<yourelem>Text</yourelem>").prependTo("e");

虽然从您的描述中听起来像是附加了一些条件,所以

if (SomeCondition){
    $("e").prepend("<yourelem>Text</yourelem>");
}
else{
    $("e").append("<yourelem>Text</yourelem>");
}
于 2010-01-05T16:23:27.000 回答
2

我认为您正在寻找.prepend jQuery 中的函数。示例代码:

$("#E").prepend("<p>Code goes here, yo!</p>");
于 2010-01-05T16:23:22.730 回答
0
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>

https://www.w3schools.com/jsref/met_node_insertbefore.asp

于 2017-12-12T23:22:12.690 回答
0

我创建了这个原型来将元素添加到父元素。

Node.prototype.prependChild = function (child: Node) {
    this.insertBefore(child, this.firstChild);
    return this;
};
于 2017-08-20T17:27:31.677 回答