How to move one content div into another without rendering again?

Question

I want to move my html content from one div into another BUT WITHOUT rendering it again!

When I use the jquery html() method it will be rendered fully again!

E.g.

<div id="1">
<script>console.log("test")</script>
</div>
<div id="2">
</div>

<script>
 $('#2').html($('#1').html())
</script>

will cause:

test
test

what I want is:

test

Answer 1

You can try using a combination of jQuery's .appendTo() and .clone() methods.

<div id="1">
    <script>console.log("test")</script>
</div>
<div id="2">
</div>

<script>
    $('#1').children().clone().appendTo('#2');
</script>

Here's a JSFiddle to demonstrate. Take a look at the console, and you should see that "test" is only logged once. If you want to move the elements from #1 to #2 rather than copy them, you can just remove .clone() from the chain.

Hope this helps! Let me know if you have any questions.

Answer 2

<script>
  $('#2').hide().html($('#1').html())
</script>