我有一个元素E,我向它添加了一些元素。突然间,我发现下一个要追加的元素应该是e的第一个子元素,有什么诀窍,怎么做呢?方法unshift不起作用,因为E是一个对象,而不是数组。
很长的路要走,遍历E的孩子,并移动他们的键++,但我相信有一个更好的方法。
我有一个元素E,我向它添加了一些元素。突然间,我发现下一个要追加的元素应该是e的第一个子元素,有什么诀窍,怎么做呢?方法unshift不起作用,因为E是一个对象,而不是数组。
很长的路要走,遍历E的孩子,并移动他们的键++,但我相信有一个更好的方法。
当前回答
除非我误解了:
$("e").prepend("<yourelem>Text</yourelem>");
Or
$("<yourelem>Text</yourelem>").prependTo("e");
虽然从你的描述听起来是有附加条件的,所以
if (SomeCondition){
$("e").prepend("<yourelem>Text</yourelem>");
}
else{
$("e").append("<yourelem>Text</yourelem>");
}
其他回答
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
我认为您正在寻找jQuery中的.prepend函数。示例代码:
$("#E").prepend("<p>Code goes here, yo!</p>");
除非我误解了:
$("e").prepend("<yourelem>Text</yourelem>");
Or
$("<yourelem>Text</yourelem>").prependTo("e");
虽然从你的描述听起来是有附加条件的,所以
if (SomeCondition){
$("e").prepend("<yourelem>Text</yourelem>");
}
else{
$("e").append("<yourelem>Text</yourelem>");
}
2018年版- prepend
parent.prepend(newChild) // [newChild, child1, child2]
这是现代JS!它比以前的选项更具可读性。它目前在Chrome, FF和Opera中可用。
添加到末尾的等效方法是append,替换旧的appendChild
parent.append(newChild) // [child1, child2, newChild]
高级用法
您可以传递多个值(或使用展开运算符…)。 任何字符串值都将作为文本元素添加。
例子:
parent.prepend(newChild, "foo") // [newChild, "foo", child1, child2]
const list = ["bar", newChild]
parent.append(...list, "fizz") // [child1, child2, "bar", newChild, "fizz"]
相关DOM方法
阅读更多——孩子。之前和孩子,之后 阅读更多- child.replaceWith
Mozilla的文档
我可以用
2017年版
你可以使用
targetElement.insertAdjacentElement('afterbegin', newFirstElement)
来自MDN:
insertAdjacentElement()方法将一个给定的元素节点插入到相对于调用它的元素的给定位置。 位置 表示相对于元素的位置的DOMString;必须是以下字符串之一: beforebegin:在元素本身之前。 afterbegin:就在元素内部,在它的第一个子元素之前。 beforeend:就在元素内部,在它的最后一个子元素之后。 afterend:在元素本身之后。 元素 要插入到树中的元素。
在insertneighbour家族中有兄弟方法:
element.insertAdjacentHTML('afterbegin','htmlText')`
它可以直接注入html字符串,就像innerHTML,但没有覆盖所有东西,所以你可以把它作为一个迷你模板引擎,跳过文档的压迫过程。createElement,甚至用字符串操作过程构建一个完整的组件
元素。insertAdjacentText用于注入消毒字符串到元素中。不再有编码/解码