将内容附加到现有 div 所需位置

Question

我希望在已有的 div 之间附加新的 div，如示例所示。

<div id='container1'>Some contents</div>
<div id='container2'>Some contents</div>
<div id='container3'>Some contents</div>
<div id='container4'>Some contents</div>
<div id='container5'>Some contents</div>

现在假设我希望使用 AJAX 在容器 4 之后、容器 5 之前附加一些内容。

如何，这可以使用 Javascript 来完成吗？

Answer 1

Jquery 中的 .append 将参数指定的内容插入到匹配元素集中每个元素的末尾。

$("#container4").append("<div>Something</div>");

或者使用.before。它将把新的 div 添加到现有的 div 之前。

$("#container5").prepend("<div>Something</div>");

请参阅此演示。

Answer 2

您可以使用 jQuery 轻松完成此操作：

$("#container4").after("text to append");

Answer 3

使用 jquery .after()
此处文档

Answer 4

我正在向您展示如何使用 Jquery，您可能会有一个想法：

jQuery('<div/>', {
    id: 'container6'
}).appendTo('#container4');

或者

$("#container5").before("<div></div>");