Wrap HTML Elements

Question

I have a HTML element like this:

<div class="entry-content">
    <p>Lorem Ipsum</p>
    <p>Lorem Ipsum</p>
    <p>Lorem Ipsum</p>
    <div class="download-attr"></div>
    <div class="download-url"></div>
    <div class="download-ads"></div>
</div>

I want to wrap it looks like:

<div class="entry-content">    
    <p>Lorem Ipsum</p>    
    <div class="entry-content-left">
        <p>Lorem Ipsum</p>
        <p>Lorem Ipsum</p>
        <div class="download-attr"></div>
        <div class="download-url"></div>
    </div>    
    <div class="entry-content-right">
        <div class="download-ads"></div>
    </div>    
</div>

How can I do it with jquery?

Answer 1

Here's how i'd do it:

$('.download-ads').wrap('<div class="entry-content-right"></div>');
$(".entry-content>*:not(p:first):not(div:last)").wrapAll('<div class="entry-content-left"></div>');

here's a fiddle: https://jsfiddle.net/mckinleymedia/Lu2pjm8e/

Answer 2

Try this way:

var content = $(".entry-content");
var lhs = $('<div class="entry-content-left"></div>');
var rhs = $('<div class="entry-content-right"></div>');
lhs.append($(".entry-content>*:not(p:first):not(div:last)")); //you can create a different selector for this task
rhs.append($(".entry-content .download-ads"));
content.append(lhs).append(rhs);

Demo: http://jsfiddle.net/lotusgodkk/GCu2D/953/