正确提取HTML

Question

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

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

如果我在隐藏的html中修改类名（现在位于工具提示中），则在通过DOM访问该类名时，该类名始终保持原始（不变）：

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

因此，似乎提取HTML效果不佳，就好像您使用的是不反映DOM的副本一样。 谁能解释真正的情况？ 我没有测试用例。 希望有人熟悉我的描述。 谢谢

Answer 1

$('#tooltip').html( $('#hiddenElement').html() ); 这条线将取代#tooltip的内容通过#hiddenElement的内容，但#hiddenElement保持不变。

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

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

Answer 2

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

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

Answer 3

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

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

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

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

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

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