jQuery：在子元素之前附加子元素答案

【问题标题】：jQuery: Append child element before child elementjQuery：在子元素之前附加子元素
【发布时间】：2014-01-16 09:57:42
【问题描述】：

我有一个这样的 HTML 代码：

<div id="content">

    <div class="foobar"></div>
</div>

我想在div.foobar 元素之前在div#content 中附加子元素。怎么能这样？

【问题讨论】：

.prepend() 是你的朋友。
developer.mozilla.org/fr/docs/DOM/element.insertBefore
@procrastinator 文档可能令人生畏，而这正是本网站的用途。无论如何，我自己在谷歌上搜索，这是第一个结果，我得到了答案（或者至少被指出了正确的方向），所以任务完成了。

标签： jquery append parent-child appendchild

【解决方案1】：

在我回答你的问题之前，让我让你更清楚、更容易地理解你想要做什么

追加表示可以在选择器的末尾插入元素作为子元素

示例append() and appendTo()

Prepend 表示可以在选择器的开头插入元素作为子元素

示例prepend() and prependTo()

请注意，选择器将被视为parent

Before 表示您可以在选择器之前添加元素

示例before() and insertBefore()

After 表示您可以在选择器之后添加元素

示例after() and insertAfter()

在does not 之前和之后将选择器视为parent 元素

现在回答你的问题

你可以使用prepend or before来做到这一点

<div id="content">
    <div class="foobar"></div>
</div>

$("your element").insertBefore("#content div.foobar") // or
$("#content div.foobar").before("element") // or
$("#content").prepend("element") // or
$("element").prependTo("#content")

注意prepend() and prependTo()中的选择器位置

【讨论】：

我喜欢你首先解释函数的方式。谢谢

【解决方案2】：

你可以用before()/insertBefore()点赞

$('#content .foobar').before(newcontent)
$(newcontent).insertBefore('#content .foobar')

或者如果您想插入新内容作为#content 的第一个子元素，请使用prepend()

$('#content').prepend(newcontent)

【讨论】：

我猜你放错了选择器和内容？它应该是 insertBefore
@niko 我认为 A 是正确的。唯一的区别在于方法的使用。 $(second).before(first) 和 $(first).insertBefore(second)
@RokoC.Buljan 是的，但第二个语句应该是 insertBefore 我猜？
@niko 啊，是的，我现在看到了。
@BlackSheep 为真，但有一个字符串变量。