JQuery append () DIV HTML без <img>

Question

Я пытался найти ответ на этот вопрос, но, похоже, не могу понять это:

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').append( $('.blog img') ); // All <IMG>'s being added to the new layout

Это работает очень хорошо, однако проблема в том, что вместо добавления <p> к #blog-left я хочу добавить все содержащиеся HTML, но за исключением тегов <IMG>. Таким образом, все HTML переходят в #blog-left и <IMG> переходят в # blog-right.

Я пытался использовать .html(), который работает до определенной точки, но #blog-left & #blog-right находятся в содержащем div .blog.

Я пробовал пару вещей, но ничего не возвращается правильно, если вообще. Так есть ли у кого-нибудь из ярких искр решение, использующее JQuery?

Заранее спасибо.

Сэм Т.

Answer 1

Я бы сделал это так:

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);

Answer 2

Попробуйте отфильтровать теги img.

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

Пример для jsfiddle .