javascript - jQuery:追加された要素を返す方法

Question

jQuery APIappend()を使用して新しい要素を追加します。

$(selector).append('<div class="test"></div>')

さらに使用するために、式が追加されたばかりの要素を返すようにしたいのですが、$(selector). では、追加したばかりの要素を jQuery に返させて、再選択しないようにするにはどうすればよいでしょうか?

Answer 1

それを行う方法は使用することだと思いますappendTo()

それからあなたはすることができます

$('<div class="test"></div>').appendTo(selector).css('background','blue');

またはあなたがやりたいことは何でも。

これにより、div追加したばかりの背景が青色になります。

Answer 2

それへの参照を保存するだけです。複数のリフローを避けるため$divに、 の一部である要素に追加する前に、ですべての操作を行う必要があることに注意してください。DOM

var $div = $('<div class="test"></div>');

$(selector).append($div);

Answer 3

html 文字列を関数appendに渡すことで、要素を独立して作成できます。jQuery

$('<div class="test"></div>');

これは、次のいずれかで使用できます。append

$(selector).append(/* $div = */$('<div class="test"></div>').… );

またはappendTo

/* $div = */$('<div class="test"></div>').appendTo(selector).… ;

または、それらを 2 つのステートメントに分けるだけです。

Answer 4

これを試してください

$(selector).append('<div class="test"></div>').find('div.test:last-child')

Answer 5

この例jsfiddlechildernのようにjQuery関数を追加することでそれを返すことができます

$(selector).append('<div class="test"></div>').children('.test');

または、この例の jsfiddleprependTOのように jQuery 関数を使用できます。

$('<div class="test"></div>').prependTo(selector);

Answer 6

多分あなたはどちらかを試すことができます

var elt = $('<div class="test"></div>');
$(selector).append(elt);

または、append の代わりに appendTo を使用し、必要なものをチェーンします (以下の例ではshow() )。

$('<div class="test"></div>').appendTo($(selector)).show()