Question

I have an HTML structure in this format:

<div class="wrap">
    <div class="name"></div>
    <div class="content">
        <div class="sub">123</div>
    </div>
</div>

<div class="wrap">
    <div class="name"></div>
    <div class="content">
        <div class="sub">abc</div>
    </div>
</div>

<div class="wrap">
    <div class="name"></div>
    <div class="content">
        <div class="sub">foo</div>
    </div>
</div>

As you can see above, I have 3 equal div elements, each with a different .sub div.
How can I get the HTML content of .sub div and put it NEXT TO .name div using jQuery when document is ready?

The results will be like:

<div class="wrap">
    <div class="name"></div>
    <div class="sub">123</div>
    <div class="content">
        <div class="sub">123</div>
    </div>
</div>

<div class="wrap">
    <div class="name"></div>
    <div class="sub">abc</div>
    <div class="content">
        <div class="sub">abc</div>
    </div>
</div>

<div class="wrap">
    <div class="name"></div>
    <div class="sub">foo</div>
    <div class="content">
        <div class="sub">foo</div>
    </div>
</div>

Answer 1

Try this:

$(".sub").each(function() {
    $(this).clone().insertAfter($(this).parent().siblings(".name"));
});

Example fiddle