cut a div and html inside it and paste it into a different div with jquery

Question

I have a 3rd party script in which i have no control over the html and can only modify basic css . I just wanted to know if its possible to cut a div and all the html inside it and paste it in a different div as soon as the page loads?

suppose we have

  <div id="example-one">
      <ul class="nav">
         <li class="nav-one"><a href="#featured" class="current">Billing Address</a></li>
      </ul>
      <div class="list-wrap">
          hello
      </div>
  </div>

and when the page loads jquery cuts the whole html specifying the div id "example-one" and paste it into a new div name it be "new-div". Is this possible ?

Answer 1

There is no cut & paste in DOM, you can append it(move it) to a different point in DOM:

$(document).ready(function() {
   $('#example-one').appendTo('#new-div');
});

In case that you want to create a div#new-div element and it doesn't exist:

$(document).ready(function() {
   $('<div/>', { id: 'new-div' }).appendTo('#somewhere').append($('#example-one'));
});

Answer 2

I was able to find the answer to my question. I tried one jQuery function and it worked like a charm as I wanted. I am pasting the code so that it can be useful to anyone who has the exact problem as mine.

jQuery(document).ready(function() {
    $('#div1').insertAfter('.div2');
});

This will cut the div1 HTML and move it to div2.