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

我有一个元素E，我向它添加了一些元素。突然间，我发现下一个要追加的元素应该是e的第一个子元素，有什么诀窍，怎么做呢?方法unshift不起作用，因为E是一个对象，而不是数组。

很长的路要走，遍历E的孩子，并移动他们的键++，但我相信有一个更好的方法。

311918 次浏览
小开

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

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

除非我误解了:

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

或

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

虽然从你的描述听起来是有附加条件的，所以

if (SomeCondition){
$("e").prepend("<yourelem>Text</yourelem>");
}
else{
$("e").append("<yourelem>Text</yourelem>");
}
小开
最佳答案 
var eElement; // some E DOM instance
var newFirstElement; //element which should be first in E


eElement.insertBefore(newFirstElement, eElement.firstChild);
小开
你可以直接在你所有的窗口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)
}
小开

2017年版

你可以使用

targetElement.insertAdjacentElement('afterbegin', newFirstElement)

来自中数:

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

< p > 位置
表示相对于元素的位置的DOMString;必须为以下字符串之一:
beforebegin:在元素本身之前。
afterbegin:就在元素内部，在它的第一个子元素之前。
beforeend:在元素内部，在它的最后一个子元素之后。
afterend:在元素本身之后 < p > 元素
要插入到树中的元素

在insertAdjacent类中有兄弟方法:

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

这可以直接注入html字符串，如innerHTML，但不覆盖一切，所以你可以使用它作为一个迷你模板引擎，跳过document.createElement的压迫过程，甚至构建一个完整的组件与字符串操作过程

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

小开

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. __abc1 - __abc0

Mozilla Documentation .

Can I Use .

小开

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

Node.prototype.prependChild = function (child: Node) {
this.insertBefore(child, this.firstChild);
return this;
};
小开 
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


提交答案