.append（）は異なる引数型に対して異なる結果を生成します

Question

JQueryとJquery UIを使用してカスタムフォームを含むダイアログボックスを作成しています。私は、基本的なダイアログフレームを持っています。このフレームには、そのボディにツールが追加されています。したがって、ダイアログの基本的な構造は、Jquery UIフレーム>ダイアログフレーム> ToolBody>ツールコンテンツです。

Code: 

ToolManager.prototype.showTool = function(tool){ 
    var $container = $("#" + this.id); 
    var $tool = $("#" + tool.id); 
    var $toolBody = $("#" + this.toolBodyId); 

    $container.dialog({ 
     resizable: false, 
     modal: true, 
     width: tool.width, 
     stack: true, 
     height: 'auto', 
     draggable: true, 
     close: this.tearDown, 
     open: this.setup 
    }); 

    $tool.removeClass("hidden"); 
    $toolBody.append($tool.html()); 
    //$toolBody.append($tool); 
    $container.show(); 
}; 

これは、しかし、私がコメントアウトラインを使用しようとしていた、このメソッドを使用する前に、リファクタリングのためにその必要性にもかかわらず動作します：

$toolBody.append($tool); 

この方法は、私のレイアウトに大混乱を引き起こしたとに追加コンテンツを引き起こしましたフォーカスを受け取れないようにする。誰でもJqueryオブジェクトの追加とhtml文字列の追加の違いを説明できますか？それともなぜこのように行動したのですか？

Answer 1

このコード行：

$toolBody.append($tool); 

$ toolのノードを受け取り、は$ toolBodyの最初のノード（うまくいけば唯一）にを移動します。

このコード行：

$toolBody.append($tool.html()); 

は$ツールの内部でHTMLコードのすべてをオンにして、文字列に変換します。 jQuery Appendメソッドはその周囲に砂糖があり、append()に文字列を入力しようとすると、その文字列を最初にノードのセットに変換する必要があることに気付くほどスマートです。

効果的には、前者の場合はノードを移動し、後者の場合は$ toolの中のノードの（悪い）クローンを実行します。

Answer 2

AFAIKオブジェクトは、DOM要素への参照であり、その要素のコピーではありません。

HTMLコンテンツをすべて表示するにはhtml（）を使用し、タグを削除してテキストコンテンツをすべて表示するにはtext（）を使用できます。

あなたは正確なコピーを作るクローンを（）を使用した方が良いかもしれない、とappendTo（）と組み合わせて使用​​することができます

のような何か：$(tool).clone().appendTo().toolBody