正しい方法でHTMLを抽出する

Question

私は気づいていました。私はページ上に隠された（表示： 'none'）HTMLを持っています。それから私は、ツールチップを作成して、一例として、このツールチップにこの方法をその隠されたHTMLからいくつかのデータを抽出します。

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

私は（ツールチップの内側になりました）その隠されたHTML、そのクラス内のクラス名を変更した場合それはDOMを経由してアクセスされたときに名前が常に（変わらない）、元のまま：

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

だから、それはあなたがDOMを反映していない、それのコピーを使用するかのようにHTMLがうまく動作しない抽出のように見えます。誰が本当に何が起こるか説明できますか？私はテストケースを持っていません。うまくいけば誰かが私が何を記述しているのかよく知っていますありがとう

Answer 1

を変更する$('#tooltip .element')のようなものを使用することができます。

$('#tooltip').html(/*here*/);にその文字列を挿入すると、文字列を指定したことをjQueryが検出するため、文字列を新しいHtmlElementの文字列として解析し続けます。これは、jQuery.fn.clone()よりも多くの時間を費やす方法で、#hiddenElementの内容から効果的にクローンを作成したことを意味します。

あなたはクローンを作成したくない場合は、代わりにjQuery.fn.contents()を使用することもできます。しかし

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

、これがないクローン内容がそうであるように、それは新しい場所ににそれらを移動し、しますしたがって、コンテンツは#hiddenElementに存在しなくなります。

私が知る限り、1つのDOMノードが2つの親ノードに同時に存在することはありません。

Answer 2

$('#tooltip').html($('#hiddenElement').html());この行は#tooltipの内容を#hiddenElementの内容で置き換えますが、#hiddenElementは変更されません。

#hiddenElementの中で何かを修正すると、この要素のためだけになります。前の行にコピーされたコンテンツへの参照はありませんので、#hiddenElementのコンテンツを変更すると#tooltipのコンテンツに変更はありません。

htmlメソッドの代わりに、ある要素から別の要素にコンテンツを移動する場合は、appendメソッドを使用する必要があります。

Answer 3

$('#hiddenElement').html()は、hiddenElement divの下にHTMLマークアップをフェッチし、hiddenElement div自体はその中に含まれていません。したがって

、あなたは1つの文字列として#hiddenElementのinnerHtmlを返し$('#hiddenElement').html()クラス