.append (), preend (), .after () và .b Before ()

Tôi khá thành thạo với mã hóa, nhưng bây giờ và sau đó tôi bắt gặp mã dường như thực hiện cùng một việc. Câu hỏi chính của tôi ở đây là, tại sao bạn sẽ sử dụng .append()thay vì sau đó .after()hoặc ngược lại?

Tôi đã tìm kiếm và dường như không thể tìm thấy một định nghĩa rõ ràng về sự khác biệt giữa hai và khi nào nên sử dụng chúng và khi nào không.

Lợi ích của cái này so với cái kia và tại sao tôi lại sử dụng cái này hơn cái kia ?? Có ai đó giải thích điều này cho tôi biết không?

var txt = $('#' + id + ' span:first').html();
$('#' + id + ' a.append').live('click', function (e) {
    e.preventDefault();
    $('#' + id + ' .innerDiv').append(txt);
});
$('#' + id + ' a.prepend').live('click', function (e) {
    e.preventDefault();
    $('#' + id + ' .innerDiv').prepend(txt);
});
$('#' + id + ' a.after').live('click', function (e) {
    e.preventDefault();
    $('#' + id + ' .innerDiv').after(txt);
});
$('#' + id + ' a.before').live('click', function (e) {
    e.preventDefault();
    $('#' + id + ' .innerDiv').before(txt);
});

Xem:

.append()đặt dữ liệu bên trong một phần tử tại last indexvà
.prepend()đặt elem chuẩn bị tạifirst index

giả sử:

<div class='a'> //<---you want div c to append in this
  <div class='b'>b</div>
</div>

Khi .append()thực thi nó sẽ trông như thế này:

$('.a').append($('.c'));

sau khi thực hiện:

<div class='a'> //<---you want div c to append in this
  <div class='b'>b</div>
  <div class='c'>c</div>
</div>

Fiddle với .append () trong thực thi.

Khi .prepend()thực thi nó sẽ trông như thế này:

$('.a').prepend($('.c'));

sau khi thực hiện:

<div class='a'> //<---you want div c to append in this
  <div class='c'>c</div>
  <div class='b'>b</div>
</div>

Fiddle với .prepend () trong thực thi.

.after()đặt phần tử sau phần tử
.before()đặt phần tử trước phần tử

sử dụng sau:

$('.a').after($('.c'));

sau khi thực hiện:

<div class='a'>
  <div class='b'>b</div>
</div>
<div class='c'>c</div> //<----this will be placed here

Fiddle với .after () trong thực thi.

sử dụng trước:

$('.a').before($('.c'));

sau khi thực hiện:

<div class='c'>c</div> //<----this will be placed here
<div class='a'>
  <div class='b'>b</div>
</div>

Fiddle với .b Before () trong thực thi.

Hình ảnh này hiển thị dưới đây đưa ra một sự hiểu biết rõ ràng và thấy sự khác biệt chính xác giữa .append(), .prepend(), .after()và.before()

Bạn có thể nhìn thấy từ hình ảnh .append()và .prepend()thêm các yếu tố mới dưới dạng các yếu tố con (màu nâu) vào mục tiêu.

Và .after()và .before()bổ sung thêm các yếu tố mới như anh chị em ruột yếu tố (đen màu) đến mục tiêu.

Đây là một DEMO để hiểu rõ hơn.

EDIT: phiên bản lật của các chức năng đó:

Sử dụng mã này :

var $target = $('.target');

$target.append('<div class="child">1. append</div>');
$target.prepend('<div class="child">2. prepend</div>');
$target.before('<div class="sibling">3. before</div>');
$target.after('<div class="sibling">4. after</div>');

$('<div class="child flipped">or appendTo</div>').appendTo($target);
$('<div class="child flipped">or prependTo</div>').prependTo($target);
$('<div class="sibling flipped">or insertBefore</div>').insertBefore($target);
$('<div class="sibling flipped">or insertAfter</div>').insertAfter($target);

về mục tiêu này:

<div class="target">
    This is the target div to which new elements are associated using jQuery
</div>

Vì vậy, mặc dù các hàm này lật thứ tự tham số, mỗi hàm tạo cùng một phần tử lồng nhau:

var $div = $('<div>').append($('<img>'));
var $img = $('<img>').appendTo($('<div>'))

... nhưng họ trả lại một yếu tố khác. Điều này quan trọng đối với phương pháp xích .

append()& prepend()là để chèn nội dung bên trong một phần tử (làm cho nội dung trở thành con của nó) trong khi after()& before()chèn nội dung bên ngoài một phần tử (làm cho nội dung trở thành anh chị em của nó).

Cách tốt nhất là đi đến tài liệu.

.append() đấu với .after()

• . append(): Chèn nội dung, được chỉ định bởi tham số, vào cuối mỗi phần tử trong tập hợp các phần tử phù hợp.
• . after(): Chèn nội dung, được chỉ định bởi tham số, sau mỗi phần tử trong tập hợp các phần tử phù hợp.

.prepend() đấu với .before()

• prepend(): Chèn nội dung, được chỉ định bởi tham số, vào đầu mỗi phần tử trong tập hợp các phần tử phù hợp.
• . before(): Chèn nội dung, được chỉ định bởi tham số, trước mỗi phần tử trong tập hợp các phần tử khớp.

Vì vậy, chắp thêm và trả trước đề cập đến con của đối tượng trong khi sau và trước đề cập đến anh chị em của đối tượng.

Có một sự khác biệt cơ bản giữa .append()và .after()và .prepend()và .before().

.append()thêm phần tử tham số bên trong thẻ của phần tử bộ chọn ở cuối cùng trong khi .after()phần tử thêm phần tử sau thẻ của phần tử .

Ngược lại là cho .prepend()và .before().

Vĩ cầm

Không có lợi thế thêm cho mỗi người trong số họ. Nó hoàn toàn phụ thuộc vào kịch bản của bạn. Mã dưới đây cho thấy sự khác biệt của họ.

    Before inserts your html here
<div id="mainTabsDiv">
    Prepend inserts your html here
    <div id="homeTabDiv">
        <span>
            Home
        </span>
    </div>
    <div id="aboutUsTabDiv">
        <span>
            About Us
        </span>
    </div>
    <div id="contactUsTabDiv">
        <span>
            Contact Us
        </span>
    </div>
    Append inserts your html here
</div>
After inserts your html here

<div></div>    
// <-- $(".root").before("<div></div>");
<div class="root">
  // <-- $(".root").prepend("<div></div>");
  <div></div>
  // <-- $(".root").append("<div></div>");
</div>
// <-- $(".root").after("<div></div>");
<div></div>    

Hãy tưởng tượng DOM (trang HTML) là một cây bên phải. Các phần tử HTML là các nút của cây này.

Nút append()thêm một nút mới vào childnút mà bạn gọi nó vào.

Example:$("#mydiv").append("<p>Hello there</p>") 

creates a child node <p> to <div>

Nút after()thêm một nút mới như là anh chị em hoặc ở cùng cấp độ hoặc con với cha mẹ của nút mà bạn đã gọi nó.

Để thử và trả lời câu hỏi chính của bạn :

tại sao bạn lại sử dụng .append () thay vì .after () hoặc ngược lại?

Khi bạn thao tác DOM với jquery, các phương thức bạn sử dụng phụ thuộc vào kết quả bạn muốn và việc sử dụng thường xuyên là thay thế nội dung.

Trong việc thay thế nội dung bạn muốn .remove()nội dung và thay thế nó bằng nội dung mới. Nếu bạn .remove()là thẻ hiện có và sau đó thử sử dụng .append()nó sẽ không hoạt động vì chính thẻ đã bị xóa, trong khi đó nếu bạn sử dụng .after(), nội dung mới sẽ được thêm 'bên ngoài' thẻ (hiện đã bị xóa) và không bị ảnh hưởng bởi trước đó .remove().