Question

我的页面上有一个空div，我希望使用jQuery插入内容。

例如：

<div class="container">
</div>

插入第一批内容后，我希望我的标记看起来像这样：

<div class="container">
    <div class="inserted first">blah</div>
</div>

第2轮插入我希望的内容：

<div class="container">
    <div class="inserted second">blah</div>
    <div class="inserted first">blah</div>
</div>

第3轮插入我想要的内容：

<div class="container">
    <div class="inserted third">blah</div>
    <div class="inserted second">blah</div>
    <div class="inserted first">blah</div>
</div>

如何使用jQuery实现这一目标？

到目前为止，我已尝试$(data).appendTo($(".container").before(".inserted"));，但这不起作用。

更新：感谢您的所有答案。到目前为止，几乎所有答案都有效。我不得不选择一个，所以去了最老的第一个。再次感谢大家的帮助。

Answer 1

您想在当前子项之前插入内容。您需要的是prepend()功能：

$(".container").prepend(data);
// assuming data is <div class="inserted second">blah</div>

Answer 2

使用.prependTo()代替.appendTo()。

Answer 3

使用prepend而不是append。假设数据包含HTML <div class="inserted x">blah</div>

您可以使用prepend()：

$(".container").prepend(data);

或prependTo()：

$(data).prependTo(".container");

Answer 4

试试这个：

$('.container').prepend(DOM object or html string);

例如：

$('.container').prepend('<div class="inserted third">blah</div>');

使用jQuery将元素插入页面

4 个答案: