Extraire HTML dans le bon sens

Question

Comportement étrange que j'ai remarqué. J'ai un HTML caché (display: 'none') sur une page. Puis-je créer une info-bulle et d'extraire des données de ce HTML caché dans cette info-bulle, à titre d'exemple, de cette façon:

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

Si je modifie le nom de la classe dans ce html caché (qui est maintenant à l'intérieur de infobulle) cette classe nom reste toujours original (inchangé) lorsqu'il est accessible via DOM:

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

il semble donc que l'extraction HTML ne fonctionne pas comme si vous utilisez une copie qui ne reflète pas les DOM. Quelqu'un peut-il expliquer ce qui se passe réellement? Je n'ai pas de test. J'espère que quelqu'un connaît ce que je décris. Merci

Answer 1

$('#hiddenElement').html() renvoie le innerHtml de #hiddenElement comme une seule chaîne.

L'insertion de cette chaîne dans $('#tooltip').html(/*here*/); entraînera la détection par jQuery de l'attribution d'une chaîne, et par conséquent, elle continuera et analysera la chaîne dans les nouveaux HtmlElement. Cela signifie que vous avez effectivement créé un clone à partir du contenu de #hiddenElement, d'une manière qui coûte beaucoup plus de temps que jQuery.fn.clone().

Si vous ne voulez pas créer des clones, vous pouvez utiliser à la place jQuery.fn.contents():

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

Cependant, comme cela ne clone le contenu, il sera les déplacer vers un nouvel emplacement, et par conséquent, le contenu ne sera plus dans le #hiddenElement. Pour autant que je sache, il n'y a aucun moyen pour un seul nœud DOM d'être dans deux nœuds parents en même temps.

Answer 2

$('#tooltip').html($('#hiddenElement').html()); cette ligne remplacera le contenu #tooltip par le contenu #hiddenElement mais #hiddenElement reste inchangé.

Lorsque vous modifiez quelque chose à l'intérieur #hiddenElement il sera juste pour cet élément. Il n'y a aucune référence au contenu qui a été copié dans la ligne précédente, donc il n'y aura pas de changement dans le contenu de #tooltip lorsque vous modifiez le contenu de #hiddenElement.

Au lieu de la méthode html, vous devez utiliser la méthode append si vous souhaitez déplacer le contenu d'un élément à un autre.

Answer 3

$('#hiddenElement').html() récupère le balisage HTML sous hiddenElement div et le div hiddenElement lui-même n'est pas inclus.

Par conséquent, vous pouvez utiliser quelque chose comme $('#tooltip .element') changer la classe