jQuery：在子元素之前添加子元素

Question

我有一个像这样的HTML代码：

<div id="content">

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

我想在div#content元素中的div.foobar元素前添加子元素。如何实现？

- Ziyaddin Sadigov

---

.prepend() 是你的好朋友。 - Ram

https://developer.mozilla.org/fr/docs/DOM/element.insertBefore - user1636522

@procrastinator，文档可能会让人感到害怕，这就是这个网站存在的原因。无论如何，我自己也在谷歌上搜索了一下，这是第一个结果，我得到了我的答案（或者至少是指引了我正确的方向），所以任务完成了。 - felwithe

Answer 1

在我回答你的问题之前，让我更清楚地解释一下，以便你理解你正在尝试的内容。

Append 表示您可以将元素作为子元素插入到选择器的末尾

例如 append() 和 appendTo()

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

例如 prepend() 和 prependTo()

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

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

例如 before() 和 insertBefore()

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

例如 after() 和 insertAfter()

before 和 after 不会将选择器视为parent元素

现在回答你的问题

您可以使用prepend或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() 和 prependTo() 中的选择器位置

- niko

---

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

Answer 2

你可以使用 before()/insertBefore() 来。

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

如果您想将新内容插入到#content的第一个子元素中，则使用prepend()。

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

- Arun P Johny

---

我猜你可能把选择器和内容放错了位置？应该是insertBefore。 - niko

@niko 我认为 A 是正确的。唯一的区别在于方法的使用。$(second).before(first) 和 $(first).insertBefore(second)。 - Roko C. Buljan

@RokoC.Buljan 是的，但第二个语句应该是 insertBefore 吧？ - niko

@niko 啊，是的，我现在看到了。 - Roko C. Buljan

@BlackSheep 是的，但是一个字符串变量呢？ - Roko C. Buljan

@RokoC.Buljan 是的，没错。 - Ram