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

Question

I have the following HTML:

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

I would like to load content using jQuery so it appears after my DIV.

I've tried this:

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

However, this ends up with this result:

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

How do I get this result?

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

Answer 1

Anyone still looking for solution, I would suggest using jQuery.get() instead of .load() to load AJAX content. Then use .after() function to specify the preceding element.

Here's an example:

$.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

I have one interesting but rather hard and difficult for understanding method, but using .load function. So, code:

$('#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();}
));

See, I put .remove() method to remove previously created div if you use this code more than once. You can delete first line if it will be used just once. The idea is .after($'') creates noname div element on the page after #mydiv and .load() the html into it with callback-function

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

which is logically will unwrap into our noname div and "rename" it to our #div_after from loading html. It is also unnecessary if you wish using just noname div.

Cheers!

PS It took me a while in a project to combine all this stuff together :) I wish it would be useful.

Answer 4

使用after（内容）功能