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>

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>

• javascript
• jquery
• html
• ajax
• load

4 Answers 4

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.
  });

Use the after function.

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!

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

with the after(content) function