2017版

Question

我有元素E，我正在为它添加一些元素。突然之间，我发现下一个元素应该是E的第一个孩子。诀窍是什么，怎么做？方法unshift不起作用，因为E是一个对象，而不是数组。

很长的路要走迭代E的孩子并移动'em键++，但我确信有更漂亮的方式。

Answer 1

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

eElement.insertBefore(newFirstElement, eElement.firstChild);

Answer 2

2017版

您可以使用

targetElement.insertAdjacentElement('afterbegin', newFirstElement)

来自MDN：

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

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

<强>元素
  要插入树中的元素。

同样在insertAdjacent的家庭中有兄弟方法：

element.insertAdjacentHTML('afterbegin','htmlText')直接注入html字符串，如innerHTML但没有覆盖所有内容，所以你可以跳过document.createElement的压迫过程，甚至用字符串操作过程构建整个组件

element.insertAdjacentText用于将sanitize字符串注入元素。不再encode/decode

Answer 3

2018版

parentElement.prepend(newFirstChild);

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

P.S。你可以直接预先添加字符串

parentElement.prepend('This text!');

developer.mozilla.org

Can I Use - 2019年5月90％

Polyfill

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

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

9 个答案:

2017版

2018版