以正确的方式提取 HTML答案

【问题标题】：Extracting HTML The Right Way以正确的方式提取 HTML
【发布时间】：2012-01-30 18:51:08
【问题描述】：

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

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

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

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

因此，如果您使用不反映 DOM 的副本，提取 HTML 似乎效果不佳。谁能解释到底发生了什么？我没有测试用例。希望有人熟悉我的描述。谢谢

【问题讨论】：

您可能想阅读以下内容：Why should y.innerHTML = x.innerHTML; be avoided?...

标签： javascript jquery css dom innerhtml

【解决方案1】：

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

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

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

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

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

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

【讨论】：

【解决方案2】：

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

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

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

【讨论】：

如果我在复制的内容中有一个带有 ID 的元素，则无法访问该元素 - 只能使用原始属性访问原始元素。那是我的问题。奇怪的是，没有两个相同 ID 的元素...
您应该尽量避免多个元素使用相同的 id。在这种情况下，jQuery 将只选择它首先匹配的一个元素。但是，如果您指定上下文，它应该在该上下文中搜索。

【解决方案3】：

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

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

【讨论】：

这帮助我访问了我丢失的元素。谢谢。