javascript - 如何将动态设置HTML的CSS封装在一个div中，使其不影响外部元素？

Question

我处于用户可以将任何 HTML 粘贴到文本框中的情况。然后我必须操纵该 HTML，例如找出所有 anchor 标记或 div 等等。

为了解决这个问题，我制作了一个隐藏的 div 并将该 div 的 html 设置为与粘贴的 HTML 相同。

var pastedHtml = $("#textbox-id").val();
$("#hiddendiv").html(pastedHtml);

完成此操作后，我可以完全访问作为 DOM 元素粘贴的 HTML 文档，并可以使用 jQuery 或 Javascript 轻松操作它。

现在我面临的问题是，如果有某种类或 id 或任何其他与母页相同的选择器，每当我将 HTML 设置到隐藏的 div 中时，我的母页就会受到影响。

所以我正在尝试以某种方式将 CSS 样式封装在粘贴的 HTML 中，这样它就不会影响外部页面。

粘贴的 HTML 可以包含内联样式(我认为这不是问题)、标签内部样式甚至来自外部文件的链接。事实上，它可以是任何东西。

所以有没有图书馆或其他东西可以做到这一点？或者我应该用什么方法来解决这个问题。

任何帮助对我来说都是非常好的。

如果需要更多数据，请告诉我。

提前致谢。

Answer 1

使用 iframe。在这种情况下，内容将与主文档完全隔离。

同时使用 html(parsedHTML) 对我来说看起来很不安全。

贾尼斯