How to Move Element With Script Element Without Re-Executing Script with jQuery?

Question

I have this code snippet:

  <div id="div1">
  </div>

  <div id="div2">
    <h3>This is the content</h3>
    <script type="text/javascript">
      alert('This is the content');
    </script>
  </div>

  <script type="text/javascript">
    jQuery('div#div2').appendTo('div#div1');
  </script>

Using this code, alert message will be displayed twice (once when the page is loading, and then when jQuery re-execute the script when it execute appendTo method?

Any idea of how to use jQuery to conveniently move element (that have script tag) around without re-executin the javascript?

Thanks.

Answer 1

Once the <script> has executed you don't need it any more, so you could remove it before moving #div2.

$('#div2 script').remove();
$('#div2').appendTo('#div1');