Question

我有<script>标记，其内容属于<div>元素。现在我需要复制/克隆内容，将其存储在变量中并稍后追加。

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

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

这是我的代码：

html内容：

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

结果：

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

Answer 1

根据

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

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

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

解决方法可能只是使用普通的html来“克隆和追加” 例如。假设你有另一个div

std::to_string()

只需复制innerhtml

即可

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

结果将是：

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

Answer 2

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

也许更好的方法是在toolTipHandler div中使用data-attributes：

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

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

2 个答案: