在jQuery中，如何在指定元素之后加载ajax内容

Question

我有以下HTML：

<div id="mydiv">
</div>

我想使用jQuery加载内容，所以它出现在我的DIV之后。

我试过这个：

$("#mydiv").load("/path/to/content.html");

但是，这最终得出以下结果：

<div id="mydiv">
<p>content from file</p>
</div>

我如何得到这个结果？

<div id="mydiv">
</div>
<p>content from file<p>

Answer 1

任何人仍在寻找解决方案，我建议使用jQuery.get()而不是jQuery.get() .load()来加载AJAX内容。 然后使用.after()函数指定前面的元素。

这是一个例子：

$.get('url.html', function(data){ // Loads content into the 'data' variable.
    $('#mydiv').after(data); // Injects 'data' after the #mydiv element.
  });

Answer 2

使用after函数。

Answer 3

我有一个有趣但相当困难和难以理解的方法，但使用.load函数。 所以，代码：

$('#div_after').remove();
$('#mydiv').after($('<div>').load('/path/to/content.html #div_after', {
    data: data, //variables to send. Useless in your case
}, function () {
    $(this).children().unwrap();}
));

如果您多次使用此代码，请参阅，我将.remove（）方法删除以前创建的div。 如果只使用一次，您可以删除第一行。 想法是.after（$''）在#mydiv和.load（）之后在页面上创建noname div元素html进入回调函数

$(this).children().unwrap();

这在逻辑上将打开我们的noname div并从加载html“重命名”到我们的#div_after。 如果你只想使用noname div，也没有必要。

干杯!

PS我花了一段时间在一个项目中将所有这些东西组合在一起:)我希望它会有用。

Answer 4

使用after（内容）功能