Извлечение HTML правильным способом

Question

Странное поведение я заметил. У меня есть скрытый (отображаемый: «нет») HTML на странице. Затем я создаю всплывающую подсказку и извлекаю некоторые данные из этого скрытого HTML-кода в эту подсказку, например, следующим образом:

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

Если я изменю имя класса в этом скрытом html (который теперь находится внутри всплывающей подсказки), то это имя класса всегда остается оригинальным (неизменным), когда к нему обращаются через DOM:

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

Таким образом, похоже, что извлечение HTML не работает должным образом, как если бы вы использовали его копию, которая не отражает DOM. Кто-нибудь может объяснить, что на самом деле происходит? У меня нет контрольного примера. Надеюсь, кто-то знаком с тем, что я описываю. Спасибо

Answer 1

$('#hiddenElement').html() возвращает innerHtml из #hiddenElement в виде одной строки.

Вставка этой строки в $('#tooltip').html( /*here*/ ); приведет к тому, что jQuery обнаружит, что вы дали строку, и, следовательно, продолжит и проанализирует строку для новых HtmlElement. Это означает, что вы фактически создали клон из содержимого #hiddenElement, что стоит намного больше времени, чем jQuery.fn.clone () .

Если вы не хотите создавать клонов, вместо этого вы можете использовать jQuery.fn.contents():

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

Однако, поскольку это не клонирует содержимое, оно перемещает их в новое место, и поэтому содержимое больше не будет находиться в #hiddenElement.

Насколько я знаю, невозможно, чтобы один DOM-узел находился в двух родительских узлах одновременно.

Answer 2

$('#hiddenElement').html() извлекает разметку HTML в элементе hiddenElement, а сам элемент hiddenElement в него не входит.

Следовательно, вы можете использовать что-то вроде $('#tooltip .element'), чтобы изменить класс

Answer 3

$('#tooltip').html( $('#hiddenElement').html() ); эта строка заменит содержимое #tooltip содержимым #hiddenElement, но #hiddenElement останется неизменным.

Когда вы измените что-либо внутри #hiddenElement, это будет только для этогоэлемент.Нет ссылки на содержимое, которое было скопировано в предыдущей строке, поэтому при изменении содержимого #hiddenElement не будет никаких изменений в содержимом #tooltip.

Вместо html метода, который выследует использовать метод append, если вы хотите переместить контент из одного элемента в другой.