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

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()方法在给定位置相对于调用它的元素插入给定元素节点.

position
一个DOMString,表示相对于该元素的位置; 必须是以下字符串之一
beforebegin::在元素本身之前.
afterbegin:就在元素内部,在它的第一个孩子之前.
beforeend:就在元素里面,在它的最后一个孩子之后.
afterend:元素本身之后.

element
要插入树中的元素.

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

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

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

Answer 3

2018年版

parentElement.prepend(newFirstChild);

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

PS你可以直接添加字符串

parentElement.prepend('This text!');

developer.mozilla.org

我可以使用 - - 2018年10月的86%

填充工具

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>");
}