添加一个包含<脚本>的 dom 元素

Add a dom element containing <script>

本文关键字：脚本 dom 元素 一个 包含 添加      更新时间：2023-09-26

我正在尝试复制一个包含<script>的<div>元素。问题是，当我将其附加到 DOM 中时，包含的脚本未执行。

我该如何解决？

它不起作用的原因在这里描述：为什么克隆节点标签不执行？。

您可以通过搜索所有script标签并用新标签替换它们来解决这个问题，这样它将在插入时执行。

  function cloneAndRenewScripts(element) {
    var dupNode = element.cloneNode(true);

    var scripts = dupNode.getElementsByTagName('script');
    for( var i=0; i<scripts.length ; i++ ) {
      var tmp = document.createElement('script');
      tmp.textContent = scripts[i].textContent;
      scripts[i].parentNode.replaceChild(tmp, scripts[i]);
    }
    return dupNode;
  }

这里有一个jsfiddle演示

通常，您添加到 DOM 中的任何内容都将作为 DOM 文本插入，并且脚本不会被执行。他们需要接受评估。
像jquery和mootools这样的框架会自动为你做到这一点。如果你使用普通的js，你需要自己做。例如：

var arr = duplicatedDiv.getElementsByTagName('script');
for (var n = 0; n < arr.length; n++)
   eval(arr[n].innerHTML) //evaluate the contents of this script tag

然而，这不是万无一失的，几乎不是要走的路。除非你确定没有其他方法，否则你永远不应该使用eval()。您尚未提供克隆div 后需要执行的脚本，但可能的答案之一是将所需的代码移动到克隆后调用的单独函数中。

例如，如果你的 html 是这样的：

<div id="orig">
  <p>some content</p>
  <script>alert('hi');</script>
</div>

你的JavaScript是这样的：

function cloneDiv(id) {
   var orig = document.getElementById(id),
   clone = orig.cloneNode(true);
   document.body.appendChild(clone);
}

您可以将其更改为：.HTML：

<div id="orig">
  <p>some content</p>
</div>

和 js：

function cloneDiv(id) {
    var orig = document.getElementById(id),
    var clone = orig.cloneNode(true);
    document.body.appendChild(clone);
    afterClone();
}
function afterClone(){
    alert('hi');
}

当然，这是一个非常简单的例子，您可能需要向函数传递一些变量或引用，但您应该了解要点。

相关文章：