1

Strange behavior I noticed. I have a hidden (display:'none') HTML on a page. Then I create a tooltip and extract some data from that hidden HTML into this tooltip, as an example, this way:

 $('#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:

 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. Can anyone explain what really happens? I do not have a test case. Hopefully someone is familiar with what I describe. Thanks

Vad
  • 3,658
  • 8
  • 46
  • 81
  • You might want to read this: [Why should y.innerHTML = x.innerHTML; be avoided?](http://stackoverflow.com/questions/7392930/why-should-y-innerhtml-x-innerhtml-be-avoided)... – Šime Vidas Jan 30 '12 at 19:05

3 Answers3

1

$('#tooltip').html( $('#hiddenElement').html() ); this line will replace #tooltip's content by #hiddenElement's content but #hiddenElement remains unchanged.

When you modify anything inside #hiddenElement it will be just for this element. 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.

Instead of html method you should use append method if you want to move content from one element to another.

ShankarSangoli
  • 69,612
  • 13
  • 93
  • 124
  • If I have an element with ID inside of the copied content, that element cannot be accessed - only original element is accessed with original properties. That's my problem. And strangely, there are no 2 elements of the same ID... – Vad Jan 30 '12 at 19:11
  • You should try to avoid same id for multiple elements. In that case jQuery will select only one element which it matches first. But if you specify the context it should search within that context. – ShankarSangoli Jan 30 '12 at 19:13
1

$('#hiddenElement').html() fetchs the HTML markup under hiddenElement div and the hiddenElement div itself is not included in it.

Hence, you can use something like $('#tooltip .element') to change the class

Sudheer Someshwara
  • 306
  • 3
  • 11
1

$('#hiddenElement').html() returns the innerHtml of #hiddenElement as one single string.

Inserting that string into $('#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. 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().

If you do not want to create clones, you could instead use 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.

As far as I know, there is no way for a single DOM-node to be in two parent nodes at the same time.

Avaq
  • 3,009
  • 1
  • 21
  • 25