Question

I would like the follow code to load a series of “holder” classes. However the after() method seems to be nesting the holders.

Current code

<div class="holder" >
    <a href="test.html" class="link">lorem ipsum</a><br />
</div>

<script type="text/javascript">
    $(document).ready(function () { 

        $('.link').click(function (event) {
            var newHolder = $('.holder').after()
            newHolder.load(this.href);
            event.preventDefault();
            return false;
        });       

    });
</script>

** Desired output **

<div class="holder"></div>
<div class="holder"></div>
<div class="holder"></div>
<div class="holder"></div>

etc

Answer 1

I think the simplest way to achieve the output you want might be this:

$('.link').click(function(e) {
    e.preventDefault();
    $(this).parent().after('<div class="holder"></div>').load(this.href);
});