How do I insert a block of html after a block that I have just rendered on the DOM

Question

I am building a block of nested divs around a specific element on the client. I am using jQuery's .wrap() initially to get the first part of the block which is working fine. But now I want to attach the ending block after the element I am wrapping and I am finding I can't attach it to anything because it is all being created at the same time. I tried using insertAfter() but I don't want it to be a sibling of the element I am wrapping, I want it to come after it's parent.

Here is my code:

$(document).ready(function() {
 buildShadows('#section');
});


function buildShadows(element){
        $(element).wrap("<div class='section_shadow_wrapper'><div class='section_shadow_curve'><div class='section_shadow_outer'><div class='section_shadow_inner_left'><div class='section_shadow_inner_right'>");
        $("<div class='section_shadow_bottom_left'><div class='section_test_bottom_right'>").insertAfter(element);

}

What I am trying to do is append the first element of the second part (section_shadow_bottom_left) as a sibling of 'section_shadow_inner_right' but after 'element'

Any help would be appreciated. Thanks.

Answer 1

You should be able to just traverse up to the new parent you just created.

Have you tried this?

function buildShadows(element){
    $(element).wrap('<div class="section_shadow_wrapper clearfix"><div class="section_shadow_curve"><div class="section_shadow_outer"><div class="section_shadow_inner_left"><div class="section_shadow_inner_right">')

       .parent().after('<div class="section_shadow_bottom_left"><div class="section_test_bottom_right">');

}

Answer 2

Try traversing to the next sibling of the original element and using .insertBefore() on it.

var nextsibling = $(element).next();
//Wrap code
$("<div class='section_shadow_bottom_left'><div class='section_test_bottom_right'>").insertBefore(nextsibling);