jQuery append () - mengembalikan elemen yang ditambahkan

188

Saya menggunakan jQuery.append () untuk menambahkan beberapa elemen secara dinamis. Apakah ada cara untuk mendapatkan koleksi atau array jQuery dari elemen yang baru disisipkan ini?

Jadi saya ingin melakukan ini:

$("#myDiv").append(newHtml);
var newElementsAppended = // answer to the question I'm asking
newElementsAppended.effects("highlight", {}, 2000);
jquery psikotik
sumber
4
kemungkinan duplikat dari cara yang lebih mudah untuk mendapatkan objek jQuery dari elemen yang ditambahkan
kebiruan

Jawaban:

263

Ada cara yang lebih sederhana untuk melakukan ini:

$(newHtml).appendTo('#myDiv').effects(...);

Ini membalikkan keadaan dengan pertama kali membuat newHtmldengan jQuery(html [, ownerDocument ]), dan kemudian menggunakan appendTo(target)(perhatikan Tobit " " untuk menambahkannya ke akhir #mydiv.

Karena Anda sekarang mulai dengan $(newHtml)hasil akhir dari itu appendTo('#myDiv')adalah sedikit html baru, dan .effects(...)panggilan akan juga pada bit baru html itu.

Slaks
sumber
2
Menggunakan jQuery UI versi 1.9.2 aku mendapatkan effectsbukan fungsi ... tapi effectadalah
Philipp M
Saya ingin menambahkan bahwa ada juga tanda tangan lain: appendTo (target, konteks). Seperti untuk pemilih jQuery apa pun yang memungkinkannya untuk mencari target, TETAPI hanya di dalam konteks tertentu. Ini bisa sangat berguna jika Anda menulis plugin atau pustaka.
Pierpaolo Cira
1
Ini akan menimbulkan kesalahan jika newHtmltidak valid HTML atau pemilih jQuery yang valid: $('/ This is Not HTML /').appendTo('#myDiv')hasil Uncaught Error: Syntax error, unrecognized expressionsementara $('#myDiv').append('/ This is Not HTML /')berfungsi dengan baik dengan menambahkan teks ke elemen target.
Thomas CG de Vilhena
41 
// wrap it in jQuery, now it's a collection
var $elements = $(someHTML);

// append to the DOM
$("#myDiv").append($elements);

// do stuff, using the initial reference
$elements.effects("highlight", {}, 2000);
karim79
sumber
2
Ini tidak berfungsi untuk saya ketika saya kemudian mencoba untuk mengikat acara ke elemen yang ditambahkan. Saya menggunakan var appendedTarget = $ (newHtml) .appendTo (elemen). Saya kemudian dapat mengikat menggunakan $ (appendedTarget) .bind ('keydown', someFunc)
Zac Imboden
Saya pikir itu $elements.effect("highlight", {}, 2000);bukan effects.
mengapa
2
Ini tidak berfungsi karena variabel $ elements setelah ditambahkan, berubah dan tidak lagi tersedia.
Alex V
@AlexV Ini sepertinya berfungsi, lihat demo langsung di jsbin.com/xivedohofi/1/edit?html,js,output , juga lihat jawaban yang sama seperti yang diterima untuk pertanyaan serupa stackoverflow.com/questions/1443233/…
Adrien Be
2
Tampaknya mereka telah memperbaikinya dalam versi jQuery yang lebih baru.
Alex V
30 
var newElementsAppended = $(newHtml).appendTo("#myDiv");
newElementsAppended.effects("highlight", {}, 2000);
Thiago Belem
sumber
10

Sedikit mengingatkan , ketika elemen ditambahkan secara dinamis, fungsi seperti append(), appendTo(), prepend()atau prependTo()kembali objek jQuery, bukan elemen HTML DOM.

DEMO

var container=$("div.container").get(0),
    htmlA="<div class=children>A</div>",
    htmlB="<div class=children>B</div>";

// jQuery object
alert( $(container).append(htmlA) ); // outputs "[object Object]"

// HTML DOM element
alert( $(container).append(htmlB).get(0) ); // outputs "[object HTMLDivElement]"
AgelessEssence
sumber
19
Elemen yang dikembalikan dari append () adalah wadah dan bukan elemen baru.
Tomas
0

Saya pikir Anda bisa melakukan sesuatu seperti ini:

var $child = $("#parentId").append("<div></div>").children("div:last-child");

Induk #parentId dikembalikan dari append, jadi tambahkan kueri anak-anak jquery ke dalamnya untuk memasukkan anak div terakhir.

$ child kemudian div anak jquery dibungkus yang telah ditambahkan.

aff
sumber