javascript - 以正确的方式提取 HTML

Question

我注意到了奇怪的行为。我在页面上有一个隐藏的 (display:'none') HTML。然后我创建一个工具提示并将一些数据从隐藏的 HTML 中提取到这个工具提示中，例如，这样:

 $('#tooltip').html( $('#hiddenElement').html() );

如果我在那个隐藏的 html 中修改类名(现在在工具提示中)，那么当通过 DOM 访问类名时，它始终保持原始(不变):

 alert($('#hiddenElement .element').hasClass('some-class');

因此看起来提取 HTML 效果不佳，就好像您使用的是不反射(reflect) DOM 的副本一样。谁能解释到底发生了什么？我没有测试用例。希望有人熟悉我所描述的内容。谢谢

Answer 1

$('#hiddenElement').html() 将 #hiddenElement 的 innerHtml 作为一个字符串返回。

将该字符串插入 $('#tooltip').html(/*here*/); 将导致 jQuery 检测到您提供了一个字符串，因此它将继续并将字符串解析为新的 HtmlElement。这意味着您已经从 #hiddenElement 的内容中有效地创建了一个克隆，所花费的时间比 jQuery.fn.clone() 多得多。 .

如果您不想创建克隆，您可以使用 jQuery.fn.contents() :

$('#tooltip').html( $('#hiddenElement').contents() );

然而，由于这不会克隆内容，它会将它们移动到一个新位置，因此内容将不再位于#隐藏元素。

据我所知，单个 DOM 节点不可能同时位于两个父节点中。