JQuery append() DIV HTML without <img>

Been trying to find an answer to this but can't seem to get my head around it:

var newLayout = '<div id="blog-left"></div>' ; // This creates the layout the content will be moved to
    newLayout += '<div id="blog-right" class="nivoSlider"></div>' ;
    newLayout += '<div style="clear:both;"></div>' ;
    newLayout += '<div id="img-temp" style="display:none;"></div>' ;

$('.blog').append(newLayout); // Add the new layout

$('#blog-left').append( $('.blog p') ); // All <p>'s being added to the new layout
$('#blog-right').app开发者_Go百科end( $('.blog img') ); // All <IMG>'s being added to the new layout

This work really well, however the problem I have is instead of appending the <p> to #blog-left I want to append all the contained HTML but minus the <IMG> tags. So all HTML goes into #blog-left and <IMG>'s go into #blog-right.

I've tried using .html() which works to a point but the #blog-left & #blog-right are in the containing div .blog.

I've tried a couple of things but nothing returns correctly if at all. So do any of you bright sparks have the solution using JQuery?

Thanks in advance.

Sam T.

I would do it like so:

var $blog = $('.blog');

// first add all images to right (removes them from .blog)
var $right = $('<div id="blog-right" class="nivoSlider" />')
              .append($blog.find('img'));

// add all remaining elements from .blog to left
var $left = $('<div id="blog-left" />').append($blog.children());

var container =  '<div style="clear:both;"></div>' + 
                 '<div id="img-temp" style="display:none;"></div>';

// add the new content to .blog
$blog.append($left).append($right).append(container);

Try this to filter out img tags.

var $blog = $('.blog');
$blog.append(newLayout);
var $p = $blog.find("p");
var $img = $blog.find("img");
$('#blog-left').append($p);
$('#blog-right').append($img);

Example on jsfiddle.