Copy / clone script with jquery

Question

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

Strange, when I add the contents of a variable, I just get external <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:

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

Result:

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

Answer 1

According to

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

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

, .append() script

html " ", . , div

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

innerhtml

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

:

<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>

Answer 2

script div script div. script . script.js.

, div toolTipHandler:

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

. - :

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

toolTipHandler. JavaScript :

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