javascript - DOM 要素を 2 回追加する (jQuery)

Question

<foo>次のスニペットがとの両方#aに追加されない理由を誰か説明できますか#b?

HTML:

<div id="a"></div>
<div id="b"></div>

JS:

$(function(){
    var $foo = $("<foo>HI</foo>");
    $("#a").append($foo);
    $("#b").append($foo);
});

編集：役立つ点をありがとう.append()、要素を移動するという事実がこの動作を説明しています。私のアプリケーションの要素は実際にはバックボーンビューの.elであるため、複製しないことを好みます。

score 20 · Accepted Answer

を使用appendすると、実際に要素が移動するためです。したがって、コードは$fooのドキュメントに移動し#a、次にから#aに移動していました#b。目的の効果のために、代わりに次のようにクローンを作成できます。この方法では、最初の要素ではなくクローンを追加します。

$(function(){
    var $foo = $("<foo>HI</foo>");
    $("#a").append($foo.clone());
    $("#b").append($foo.clone());
});

htmlfromを追加することもできます$foo。これは、要素自体ではなく、その中の dom のコピーを取るだけです。

$(function(){
    var $foo = $("<foo>HI</foo>");
    $("#a").append($foo[0].outerHTML);
    $("#b").append($foo[0].outerHTML);
});

上記の例は$foo、文字列から作成された単なる jQuery オブジェクトではなく、DOM の要素から作成された可能性が高い、より複雑なシナリオがあることを前提としています。

実際、この方法でこの目的のために単純に作成された場合...最初からそのjQueryオブジェクトを作成する理由はまったくありません。次のように、文字列自体（"<foo>HI</foo>"）を直接追加するだけです。

var foo = "<foo>HI</foo>";
$("#a").append(foo);
//...

score 12 · Accepted Answer

試してみてくださいclone。$foo名前が示すように、これは要素をコピーし、移動appendはしません。

$(function(){
    var $foo = $("<foo>HI</foo>");
    $("#a").append($foo.clone());
    $("#b").append($foo.clone());
});

しかし、なぜこれを使用しないのですか？

$("#a,#b").append($foo);

これも機能します:)

これらの両方の状況のデモは次のとおりです。http://jsfiddle.net/hungerpain/sCvs7/3/

score 9 · Accepted Answer

DOMcreate a new instanceに追加するたびに必要です。

それ以外の場合は、既に追加されている同じインスタンスを参照します。

追加される新しい div の前にある記号を削除し$ます。これは、jQuery オブジェクトに評価され、上記の制限があるためです。またはclone要素。

$(function(){
    var foo = "<foo>HI</foo>";
    $("#a").append(foo);
    $("#b").append(foo);
});

score 4 · Accepted Answer

現在のコードは同じインスタンスを 2 回参照しているだけなので、.clone() メソッドを使用して新しいインスタンスを作成し、DOM に追加できます。

$(function(){
    var $foo = $("<foo>HI</foo>");
    var $foo2 = foo.clone();
    $("#a").append($foo);
    $("#b").append($foo2);
});

5 に答える 5