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

2020/10/09 22:01 · javascript ·  · 0评论

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

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

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

eElement.insertBefore(newFirstElement, eElement.firstChild);

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

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.beforechild.after
  2. 阅读更多-child.replaceWith

Mozilla文档

我可以使用-2020年5月为94%

您可以在所有窗口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)
}

除非我有误解:

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

要么

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

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

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

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

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

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

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

本文地址:http://javascript.askforanswer.com/ruhejiangdomyuansushezhiweidiyigehaizi.html
文章标签: ,   ,   ,   ,  
版权声明:本文为原创文章,版权归 javascript 所有,欢迎分享本文,转载请保留出处!

文件下载

老薛主机终身7折优惠码boke112

上一篇:
下一篇:

评论已关闭!