正确地提取HTML

Question

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

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

如果我在隐藏的html（现在位于工具提示内）中修改类名，那么当通过DOM访问类名时，类名始终保持原始状态（未更改）：

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

因此，如果您使用不反映DOM的副本，那么提取HTML看起来效果不佳。谁能解释一下究竟发生了什么？我没有测试用例。希望有人熟悉我所描述的内容。感谢

Answer 1

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

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

如果您想将内容从一个元素移动到另一个元素，则应使用html方法代替append方法。

Answer 2

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

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

Answer 3

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

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

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

#hiddenElement

但是，由于这不会克隆内容，它会将移动到新位置，因此内容将不再位于{{1} }。

据我所知，单个DOM节点无法同时位于两个父节点中。