jQuery: làm thế nào để trở lại các yếu tố gắn

Question

tôi sử dụng jQuery API append() để thêm một yếu tố mới:

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

Tôi muốn biểu hiện trở lại các yếu tố chỉ nối để sử dụng tiếp của tôi, tuy nhiên nó sẽ trả về $(selector). Vì vậy, làm thế nào tôi có thể cho phép jQuery để trả lại phần tử chỉ được nối thêm để tránh tái chọn nó?

Answer 1

Tôi tin rằng cách để làm điều đó sẽ được sử dụng appendTo()

Sau đó, bạn có thể làm

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

hoặc bất cứ điều gì bạn muốn làm.

Điều đó sẽ gây ra div bạn vừa thêm vào để có nền màu xanh lam.

Answer 2

Bạn chỉ có thể lưu trữ một tham chiếu đến nó. Hãy nhớ rằng bạn nên thực hiện tất cả các thao tác của mình với $div trước khi gắn nó vào một phần tử là một phần của DOM để tránh nhiều lần lặp lại.

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

$(selector).append($div); 

Answer 3

Bạn có thể tạo các phần tử độc lập từ append bằng cách thông qua các chuỗi html vào jQuery function:

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

Bạn có thể sử dụng một trong hai trong append

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

hoặc với appendTo

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

hoặc bạn chỉ tách chúng thành hai câu lệnh.

Answer 4

Điều này cũng có thể hoạt động.

<div class="inner">hellworld</div> 
$('.inner').append('<p>paragraph</p>'); 

việc này sẽ chèn hai điểm mới và hiện có như ba nút con cuối cùng của cơ thể

var $newdiv1 = $('<div id="object1"/>'), 
newdiv2 = document.createElement('div'), 
existingdiv1 = document.getElementById('foo'); 
$('body').append($newdiv1, [newdiv2, existingdiv1]); 

Answer 5

Có lẽ bạn có thể thử một trong hai

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

Hoặc sử dụng appendTo thay vì append và sau đó chuỗi bất kỳ thứ gì bạn cần (hiển thị() trong ví dụ bên dưới)

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

Answer 6

Vui lòng thử này

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

Answer 7

Bạn có thể trở lại nó bằng cách thêm childern jQuery chức năng như trong ví dụ này jsfiddle

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

hoặc bạn có thể sử dụng prependTO jQuery chức năng như trong ví dụ này jsfiddle:

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