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>

seem appear with jQuery <= 1.8.3 on jsfiddle, you could update your jQuery library with a newer one — Hacketo, Mar 10 '16 at 15:37
@Hacketo, we are using 1.8.2 :(. And no, unfortunately I can't update it.. :/ — Sebsemillia, Mar 10 '16 at 15:42
This seems like a strange (hacky) thing to do. Is there not a better way of handling those variables? — logic-unit, Mar 10 '16 at 15:46
@logic-unit I know, but no, right now this is the stetting I have to deal with.. — Sebsemillia, Mar 10 '16 at 15:59

Khelmo · Answer 1 · 2016-03-11T13:31:37.790

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>

edited Mar 11 '16 at 13:31

answered Mar 10 '16 at 15:52

Khelmo

364
2
7

Yes, this is most probably the reason. Any idea of a workaround? I can just think of restructuring the whole project so that I don't have to clone+append.. :/ – Sebsemillia Mar 10 '16 at 16:16
Without knowing more about what you're trying to do, we can only speculate. Maybe provide a working example on jsFiddle.net or somewhere like that. – Silkster Mar 10 '16 at 19:58
You could use plain html to 'clone and append'. You could still use a jquery selector to select whetever you want to copy iterate over the selection and use this.innerhtml to copy content. – Khelmo Mar 11 '16 at 13:34

score 0 · Answer 2 · answered Mar 10 '16 at 15:44

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;

Yes I thought about data-attributes as well but fefrained from it for the same reasons. Unfortunately the html tag structure might differ and there will be more than just two variables.. but thank you for your effort! — Sebsemillia, Mar 10 '16 at 16:10

copy / clone script tag with jquery

2 Answers2