243

我有元素E，并向其添加了一些元素。突然之间，我发现下一个元素应该是E的第一个孩子。诀窍是什么，怎么做？方法取消移位不起作用，因为E是一个对象，而不是数组。

很长的路要走遍E的孩子，并移动他们的键++，但是我敢肯定，有更漂亮的方法。

— 波帕拉
source

1

你们很快！对不起，我想我误会了。元素e |-child-el_1 |-child-el_2 |-child-el_3然后是child-el_4 ...，它需要适合第一个孩子。前置将child-el_4放在[b] e [/ b]之前，我是错又累吗？

— Popara 2010年

472

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

eElement.insertBefore(newFirstElement, eElement.firstChild);

— 内米斯
source

3

你我的朋友，刚给你自己一个熊！有用的额外发现。docs.jquery.com/Manipulation/insertBefore

— Popara 2010年

79

对于信息，如果父级中没有元素，则无论如何都会添加子级。

— 2014年

如果firstChild是text节点，则抛出异常。但是，jQuery不会添加前缀。

— 谢尔盖·萨哈克扬

3

@Sergey，也适用于我的文本节点，在Firefox和Chromium上进行了测试。您使用什么浏览器？您确定问题不在您身边吗？您是否愿意准备可重现问题的代码片段/ jsfiddle？

— 用户

list.outerHTML = entry.outerHTML + list.outerHTML; 希望可以帮助某人。

— Deniz Porsuk

106

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用于将消毒字符串注入element中。不再encode/decode

— 佩里·蒙蒙
source

2

很好的建议，但为什么要“回到2017年”，即使在ie8上，这也是标准方法

— Vitaliy Terziev

谢谢。再次感谢您的见解。标题是为了帮助人们快速区分这是新答案

— pery mimon

如果element = document.importNode（documentfragment，true），该怎么办？

— 马丁·梅瑟

返回没有的elementtypeof 。直到我们有更好的答案，您最好的猜测是将追加到。进行dom操作，然后使用并取回碎片document-fragmentinsertAdjacent...()fragmentdivRange.selectNodeContents()Range.extractContents()

— pery mimon

其中“元素”是您要添加的元素，而“元素”是您要添加的元素;）

— bokkie

95

2018版

parentElement.prepend(newFirstChild)

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

PS您可以直接在字符串前添加

parentElement.prepend('This text!')

developer.mozilla.org

我可以使用 -94％2020年5月

Polyfill

— 吉博尔特
source

6

很好的解决方案，谢谢！令我感到恼火的是，他们决定在末尾添加一个孩子，.appendChild()但将其添加到开始.prepend()不是坚持约定俗成的称呼.prependChild()

— Marquizzo

1

append()同样存在，其工作方式与相同prepend()，但最终

— Gibolt

1

当我发现这些问题已经问到了有关实施的问题时，我也感到困惑prepend。:(好吧，它过去不存在

— Rick

10

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

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

— 约格
source

prepend是等效的香草JS，不需要原型。这将在ES7中成为标准配置，并且应尽可能在您的应用中使用

— Gibolt，

6

接受的答案重构为函数：

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

— 约瑟夫·迪克斯特拉
source

+1用于使用父子关系。公认的答案缺乏这一点。我需要知道什么eElement才有意义。为此，我需要阅读问题。在大多数情况下，我只是检查标题并直接转到答案，而忽略了问题的详细信息。

— akinuri

4

除非我有误解：

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

要么

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

尽管从您的描述中听起来好像存在某些条件，所以

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

— 詹姆斯·怀斯曼
source

为$版本+1！我正在编写jQuery扩展函数，因此出于性能原因，我将尽可能使用本机版本，但这是完美的！

— 泰勒·埃文森

不，他在寻找JavaScript，而不是jquery。

— vinyll

2

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

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

— 埃米尔·维克斯特伦（EmilVikström）
source

你们很快！对不起，我想我误会了。元素e |-child-el_1 |-child-el_2 |-child-el_3然后是child-el_4 ...，它需要适合第一个孩子。前置将child-el_4放在[b] e [/ b]之前，我是错又累吗？

— Popara 2010年

0

我创建了此原型，以将元素添加到父元素之前。

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

— 拉扎
source

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

— 伊尔克猫
source

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

2017版

2018版