使用 jQuery 复制/克隆脚本标记

Question

我有一个<script>标签，其中包含<div>元素中的内容。现在我需要复制/克隆内容，将其存储在变量中，稍后再附加。

奇怪的是，当我附加变量内容时，我只是得到外部<div>.

知道我做错了什么吗？我们正在使用 jQuery 1.8.2。

这是我的代码：

目录内容：

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

脚本.js内容：

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

结果：

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

Answer 1

根据

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

在 1.9 之前，任何接受 HTML 的方法（例如 $（）、.append（） 或 .wrap（））都会执行 HTML 中的任何脚本，并将它们从文档中删除以防止它们再次执行

所以问题是 .append（） 正在删除脚本

解决方法可能是仅使用纯 html 来"克隆和附加"例如。假设您有另一个div

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

只需复制内部html

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

在div 中使用脚本标记不会将脚本中的变量分配给div。该脚本标记可以位于页面中的任何位置。或者，变量也可以在脚本.js文件中声明。

也许更好的方法是在 toolTipHandlerdiv 中使用 data- 属性：

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

然后插入工具提示处理程序数据中的值。你的 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;