In jQuery, how to load ajax content after a specified element

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

with the after(content) function

Answer 2

Use the after function.

Answer 3

Could someone please show me a working example of this? The following syntax does not work (trying to insert AJAX-loaded content after a certain a href-tag):

$("a#loadMore").after().load("/xml/moreContent");

What happens is that jQuery inserts the new content inside the a href tag, like this:

<a href="" id="loadMore">

...AJAX content is inserted here

</a>

Thanks in advance!

/Thomas