Question

我正在开发一个chrome扩展，我需要克隆body标签 - 孩子们。（克隆 - 以便在DOM更改时不会更新元素）。并将它们重新附加到body标签，而不使用脚本标签。 我这样做是为了避免执行脚本标记。

问题是我不希望克隆脚本标记以及正文中的其他元素。我读到使用正则表达式过滤/搜索html中的内容是一般的not a good idea。

我如何实现目标，我的选择是什么？

Answer 1

vanilla javascript方法可能如下所示。

var div = document.createElement('div');

div.innerHTML = document.body.innerHTML;

div.querySelectorAll('script').forEach(function(scriptTag) {
  scriptTag.parentNode.removeChild(scriptTag);
});

document.body.innerHTML = div.innerHTML;

<div>
  A div
</div>

<script>
  console.log('hi');
</script>

<p>
  A paragraph
</p>

Answer 2

使用jQuery，您可以尝试类似：

var $clone = $('<div>').append($('body').html())
    $clone.find('script').remove()

然后当你想要替换：

$('body').html($clone.html())

请注意，使用此方法将丢失所有事件侦听器

javascript - 克隆没有脚本标签的DOM主体

2 个答案: