Question

I have an example DOM as such below where new child elements can be added:

<div id='blog'>
     <div class='item-1'>html content with <b>tags</b> and more..</div>
    <div class='another-item'>more html content with <b>tags</b> and more..</div>
    <div class='item-1'>you <div id='stuff'>get the idea</div></div>
</div>

<div id='blog_article_container></div>

And I will need to detach and append these child divs to newly added divs. I need the above to look like this:

 <div id='blog_article_container>
      <div id='content_container' class='article_brick'><div class='item-1'>html content with <b>tags</b> and more..</div></div>
      <div id='content_container' class='article_brick'><div class='another-item'>more html content with <b>tags</b> and more..</div></div>
       <div id='content-container' class='article_brick'><div class='item-1'>you <div id='stuff'>get the idea</div></div>

Any help would be much appreciated oh Lords of Stackoverflow!

Answer 1

Take each inner div, move it to the container, and then wrap it:

$('#blog > div').each(function() {
    $(this).appendTo('#blog_article_container')
        .wrap("<div id='content_container'class='article_brick'>");
});​

See http://jsfiddle.net/alnitak/78BAx/

NB: you really shouldn’t use the same id for the wrapping div.