Jquery after ie8/ie7 not working

Question

I'm trying to insert data after an existing DOM element. I'm getting an error "Invalid argument." -- this.parentNode.insertBefore

This is not working in IE8 or IE7. Ideas?

Jfiddle example: http://jsfiddle.net/zJ3Fe/

<a href="#" id="delete_promo">Click</a>

<div id="customer-info" class="span-12">
        <form id="UserFormCheckoutForm" method="post" action="/chicagophotographycenter/checkout" accept-charset="utf-8"><div style="display:none;"><input type="hidden" name="_method" value="POST" /></div>
        <h2 class="line"><span>Billing/Shipping Address</span></h2>
        <div class="padding">
            <div id="billing-first-name">
                <label>First Name</label><br />
                <span><input name="data[User][first_name]" type="text" maxlength="150" value="Fred" id="UserFirstName" /></span>
            </div>
            <div id="billing-last-name">
                <label>Last Name</label><br />
                <span><input name="data[User][last_name]" type="text" maxlength="150" value="" id="UserLastName" /></span>
            </div><br />
            <div id="billing-email">
                <label>Email</label><br />
                <span><input name="data[User][email]" type="text" maxlength="255" value="" id="UserEmail" /></span><br />
            </div>
            <div id="billing-phone">
                <label>Phone Number</label><br />
                <span><input name="data[Customer][phone]" type="text" maxlength="15" value="" id="CustomerPhone" /></span><br />
            </div>
            <label>Street Address</label><br />
            <span><input name="data[Address][0][address]" type="text" maxlength="150" value="" id="Address0Address" /></span><br />
            <span><input name="data[Address][0][address2]" type="text" maxlength="150" value="Suite 203" id="Address0Address2" /></span><br />
            <div id="billing-city">
                <label>City</label><br />
                <span><input name="data[Address][0][city]" type="text" maxlength="150" value="" id="Address0City" /></span>
            </div>
            <div id="billing-state">
                <label>State</label><br />
                <span><input name="data[Address][0][state]" type="text" maxlength="2" value="IL" id="Address0State" /></span>
            </div>
            <div id="billing-zip">
                <label>Zip</label><br />
                <span><input name="data[Address][0][zip]" type="text" maxlength="10" value="" id="Address0Zip" /></span><br />
            </div>
        </div><!-- end .padding -->
    </div><!-- end #customer-info -->



<script type="text/javascript" charset="utf-8">
     $('#delete_promo').click(function() {     
        $('#customer-info').after('<div id="payment">Credit Card</div>');

        $('#UserFirstName').val('Test');

        return false;
    });
</script>

Answer 1

I just solved this. It's the freaking html comments at the end of the div's. Those were messing up the jquery on line 4103. 'this.nextSibling' was stored in the DOM as DispHTMLCommentElement. Appears this was causing the issues. I'm not sure if saving comments in the DOM is standard or not. Appears that neither Safari, Chrome or FF do that.

after: function() {
        if ( this[0] && this[0].parentNode ) {
            return this.domManip(arguments, false, function( elem ) {
                this.parentNode.insertBefore( elem, this.nextSibling );
            });
        } else if ( arguments.length ) {
            var set = this.pushStack( this, "after", arguments );
            set.push.apply( set, jQuery(arguments[0]).toArray() );
            return set;
        }
    },

Answer 2

I don't think it's the comments. I still get the error even without them.

The problem goes away, however, if I include the missing </form> close-tag inside #customer-info. (The validator is your friend!)

Strange error though, presumably related to the weird inconsistent-hierarchy tricks IE does when given mis-nested HTML.