[英]Extracting HTML The Right Way
Strange behavior I noticed. 我注意到了奇怪的行为。 I have a hidden (display:'none') HTML on a page.
我在页面上有一个隐藏的(显示:“ none”)HTML。 Then I create a tooltip and extract some data from that hidden HTML into this tooltip, as an example, this way:
然后,我创建一个工具提示,并以这种方式从该隐藏的HTML中提取一些数据到此工具提示中,例如:
$('#tooltip').html( $('#hiddenElement').html() );
If I modify class name within that hidden html (which is now inside of tooltip) that class name always remains original (unchanged) when it is accessed through DOM: 如果我在隐藏的html中修改类名(现在位于工具提示中),则在通过DOM访问该类名时,该类名始终保持原始(不变):
alert($('#hiddenElement .element').hasClass('some-class');
So it looks like extracting HTML does not work well as if you use a copy of it which does not reflect DOM. 因此,似乎提取HTML效果不佳,就好像您使用的是不反映DOM的副本一样。 Can anyone explain what really happens?
谁能解释真正的情况? I do not have a test case.
我没有测试用例。 Hopefully someone is familiar with what I describe.
希望有人熟悉我的描述。 Thanks
谢谢
$('#tooltip').html( $('#hiddenElement').html() );
this line will replace #tooltip
's content by #hiddenElement
's content but #hiddenElement
remains unchanged. 这条线将取代
#tooltip
的内容通过#hiddenElement
的内容,但#hiddenElement
保持不变。
When you modify anything inside #hiddenElement
it will be just for this element. 当您在
#hiddenElement
内部修改任何#hiddenElement
,将仅用于此元素。 There is no reference to the content which was copied in the earlier line so there will be no change in #tooltip
's content when you modify #hiddenElement
's content. 由于没有引用在前一行中复制的内容,因此当您修改
#hiddenElement
的内容时, #tooltip
的内容不会发生变化。
Instead of html
method you should use append
method if you want to move content from one element to another. 如果要将内容从一个元素移动到另一个元素,则应使用
append
方法来代替html
方法。
$('#hiddenElement').html()
fetchs the HTML markup under hiddenElement div and the hiddenElement div itself is not included in it. $('#hiddenElement').html()
获取hiddenElement div下的HTML标记,hiddenElement div本身不包含在其中。
Hence, you can use something like $('#tooltip .element')
to change the class 因此,您可以使用类似
$('#tooltip .element')
的类来更改类
$('#hiddenElement').html()
returns the innerHtml
of #hiddenElement
as one single string. $('#hiddenElement').html()
返回innerHtml
的#hiddenElement
作为一个字符串。
Inserting that string into $('#tooltip').html( /*here*/ );
将该字符串插入
$('#tooltip').html( /*here*/ );
will cause jQuery to detect that you've given a string, and therefore it will continue and parse the string to new HtmlElement
's. 会导致jQuery检测到您提供了一个字符串,因此它将继续并将该字符串解析为新的
HtmlElement
。 This means you've effectively created a clone from the contents of #hiddenElement
, in a way that costs a lot more time than jQuery.fn.clone() . 这意味着您已经有效地从
#hiddenElement
的内容创建了一个副本,这种方式比jQuery.fn.clone()花费更多的时间。
If you do not want to create clones, you could instead use jQuery.fn.contents()
: 如果您不想创建克隆,则可以使用
jQuery.fn.contents()
:
$('#tooltip').html( $('#hiddenElement').contents() );
However, as this does not clone the contents, it will move them to a new location, and therefore the content will no longer be in the #hiddenElement
. 但是,由于这不会克隆内容,因此会将其移动到新位置,因此内容将不再位于
#hiddenElement
。
As far as I know, there is no way for a single DOM-node to be in two parent nodes at the same time. 据我所知,单个DOM节点无法同时位于两个父节点中。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.