如何将 DOM 元素设置为第一个子元素？

Question

我有一个元素 E，我正在向其附加一些元素。突然，我发现下一个要追加的元素应该是 E 的第一个子元素。有什么技巧，该怎么做？ unshift 方法不起作用，因为 E 是一个对象，而不是数组。

很长的方法是迭代 E 的子级并移动它们 key++，但我确信有一个更好的方法。

Answer 1

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

eElement.insertBefore(newFirstElement, eElement.firstChild);

Answer 2

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.before 和child.after
2. 了解更多 - child.replaceWith

Mozilla 文档

我可以使用

Answer 3

2017 版本

您可以使用

targetElement.insertAdjacentElement('afterbegin', newFirstElement)

来自 MDN ：

insertAdjacentElement() 方法在相对于调用它的元素的给定位置插入给定元素节点。

位置
表示相对于元素的位置的 DOMString；必须是以下字符串之一：
beforebegin：在元素本身之前。
afterbegin：就在元素内部，在其第一个子元素之前。
beforeend：就在元素内部，在其最后一个子元素之后。
afterend：在元素本身之后。

元素
要插入到树中的元素。

在 insertAdjacent 系列中，有兄弟方法：

element.insertAdjacentHTML('afterbegin','htmlText')`

可以直接注入 html 字符串，如 innerHTML 但不覆盖所有内容，因此您可以将其用作迷你模板 Engin并跳过 document.createElement 的压抑过程，甚至使用字符串操作过程

element.insertAdjacentText 构建一个完整的组件，以将清理字符串注入到 element 中。不再需要编码/解码

Answer 4

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

HTMLElement.prototype.appendFirst = function(childNode) {
    if (this.firstChild) {
        this.insertBefore(childNode, this.firstChild);
    }
    else {
        this.appendChild(childNode);
    }
};

Answer 5

接受的答案重构为函数：

function prependChild(parentEle, newFirstChildEle) {
    parentEle.insertBefore(newFirstChildEle, parentEle.firstChild)
}

Answer 6

除非我误解了：

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

或者

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

虽然从你的描述来看好像有附加条件，所以

if (SomeCondition){
    $("e").prepend("<yourelem>Text</yourelem>");
}
else{
    $("e").append("<yourelem>Text</yourelem>");
}

Answer 7

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

$("#E").prepend("<p>Code goes here, yo!</p>");

Answer 8

我创建这个原型是为了将元素添加到父元素之前。

Node.prototype.prependChild = function (child: Node) {
    this.insertBefore(child, this.firstChild);
    return this;
};

Answer 9

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