Sự khác biệt giữa $ .add và $ .append JQuery

Question

Tôi đã tự hỏi và không thể nhận được bất kỳ tài liệu nào tốt nhất về sự khác biệt giữa $ .add và $ .append khi chúng tôi có một phần tử đơn lẻ để thêm hoặc thêm vào vùng chứa .

Cảm ơn trước

Answer 1

Với đối tượng jQuery đại diện cho tập hợp các phần tử DOM, phương thức .add() xây dựng một đối tượng jQuery mới từ liên kết của các phần tử đó và các đối tượng được chuyển vào phương thức. Nhưng nó không chèn phần tử vào DOM, tức là sử dụng .add() phần tử sẽ được thêm vào DOM nhưng để xem nó trong trang bạn phải chèn nó vào trang bằng cách sử dụng phương thức insertion/append.

Answer 2

Thêm chỉ cần thêm các yếu tố để các đối tượng jquery, nó không thêm nó vào DOM

Nối thêm phần tử vào DOM như đứa trẻ.

Answer 3

Chúng hoàn toàn không liên quan.

.add()

Thêm yếu tố với tập hợp các yếu tố phù hợp.

ví dụ:

Nếu bạn muốn làm,

$('div').css('color':'red'); 
$('div').css('background-color':'yellow'); 
$('p').css('color':'red'); 

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

$('div').css('background-color':'yellow').add('p').css('color':'red'); 

Reference

.append()

Chèn nội dung, quy định bởi tham số, đến cuối mỗi phần tử trong tập hợp các phần tử đã so khớp.

$('div').append('p'); 

sẽ nối chọn p trên tất cả các lựa chọn div trong dom.

Reference

Answer 4

.add()

for example: 
<ul> 
    <li>list item 1</li> 
    <li>list item 2</li> 
    <li>list item 3</li> 
</ul> 
<p>a random paragraph</p> 

để thay đổi màu sắc của <li> yếu tố VÀ các <p> yếu tố sang màu đỏ, bạn có thể viết:

$("li").css("background-color", "green"); 
$("p").css("background-color", "green"); 

hoặc cô đặc bằng cách sử dụng. add()

$("li").add("p").css("background-color", "green"); 

.append()

tạo thành phần mới để thêm vào DOM và sẽ xuất hiện dưới dạng một phần tử con hiện có.

<div>one</div> 
<div>two</div> 

<ol> 
    <li>item1</li> 
    <li>item2</li> 
</ol> 

$("div").append('<p>'); 

sẽ cho kết quả:

<div>one</div> 
<p></p> 
<div>two</div> 
<p></p> 

<ol> 
    <li>item1</li> 
    <p></p> 
    <li>item2</li> 
    <p></p> 
</ol>