copy / clone script tag with jquery

Question

I have a <script> tag with content within a <div>element. Now I need to copy / clone the content, store it in a variable and append it later.

Strangely when I append the variable content, I just get the outer <div>.

Any idea what I'm doing wrong? We are using jQuery 1.8.2.

Here is my code:

html content:

<div id="payl">
    <div class="toolTipHandler">
        <script type="text/javascript">
            var xxx_title = "<h4>title</h4>";
            var xxx_text = "<p>bla bla</p>";
        </script>
    </div>
</div>

script.js content:

var toolTipHandler = jQuery('#payl .toolTipHandler').clone(true);
document.getElementById('payl').innerHTML = '';
jQuery('#payl').append(toolTipHandler);

Result:

<div class="toolTipHandler"></div>

Answer 1

Having a script tag within a div doesn't assign the variables within the script to the div. That script tag can live anywhere in the page. Or the variables might as well be declared in your script.js file.

Maybe a better approach would be to use data- attributes in the toolTipHandler div:

<div id="payl">
    <div class="toolTipHandler" data-title="<h4>title</h4>" data-text="<p>bla bla</p>">
    </div>
</div>

But putting markup in the values isn't really good use of the data- attributes. I would do something like this:

<div id="payl">
    <div class="toolTipHandler" data-title="title" data-text="bla bla">
         <h4></h4>
         <p></p>
    </div>
</div>

Then insert the values from toolTipHandler data. Your JavaScript might look something like this:

var tth = $("#pay1 .toolTipHandler");
var title = tth.data("title");
var text = tth.data("text");
tth.find("h4").innerText = title;
tth.find("p").innerText = text;

Answer 2

According to

https://jquery.com/upgrade-guide/1.9/

Prior to 1.9, any HTML-accepting method (e.g., $(), .append(), or .wrap()) executed any scripts in the HTML and removed them from the document to prevent them from being executed again

So the problem is the .append() is removing the script

A workaround might be to just use plain html to "clone and append" eg. Say you have another div

<div id='payl2'>....</div>

Just copy the innerhtml

document.getElementById('payl2').innerHTML=document.getElementById('payl2').innerHTML+document.getElementById('payl').innerHTML;

Result would be:

<div id='payl2'>....

<div class="toolTipHandler">
    <script type="text/javascript">
        var xxx_title = "<h4>title</h4>";
        var xxx_text = "<p>bla bla</p>";
    </script>
</div>

</div>