正确提取HTML

Extracting HTML The Right Way

本文关键字：HTML 提取      更新时间：2023-09-26

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

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

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

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

因此，提取HTML看起来不太好，就像您使用了一个不反映DOM的副本一样。有人能解释一下到底发生了什么吗？我没有测试用例。希望有人熟悉我描述的内容。感谢

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

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

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

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

但是，由于这不会克隆内容，它将将其移动到新位置，因此内容将不再位于#hiddenElement中。

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

$('#tooltip').html( $('#hiddenElement').html() );此行将用#hiddenElement的内容替换#tooltip的内容，但#hiddenElement保持不变。

当您修改#hiddenElement中的任何内容时，它将仅用于此元素。没有引用前一行中复制的内容，因此在修改#hiddenElement的内容时，#tooltip的内容不会发生更改。

如果要将内容从一个元素移动到另一个元素，则应使用append方法，而不是html方法。

$('#hiddenElement').html()获取hiddenElementdiv下的HTML标记，而hiddenElement的div本身不包含在其中。

因此，您可以使用类似$('#tooltip .element')的东西来更改类

相关文章：