将内容附加到所需位置的现有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>

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

如何使用Javascript完成？

Answer 1

Jquery中的

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

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

或者使用.before。它会将新div添加到现有div。

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

请参阅此demo。

Answer 2

您可以使用jQuery轻松完成此任务：

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

Answer 3

使用jquery .after() Here documentation

Answer 4

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

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

或者

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