. append (), prepend (), .after () และ. before ()

ฉันค่อนข้างมีความเชี่ยวชาญในการเขียนโค้ด แต่ตอนนี้จากนั้นฉันเจอโค้ดที่ดูเหมือนว่าจะทำสิ่งเดียวกัน คำถามหลักของฉันที่นี่คือทำไมคุณจะใช้.append()ค่อนข้างแล้ว.after()หรือรองข้อ?

ฉันได้รับการมองและไม่สามารถหาคำจำกัดความที่ชัดเจนของความแตกต่างระหว่างทั้งสองและเมื่อจะใช้พวกเขาและเมื่อไม่ให้

ประโยชน์ของอีกด้านหนึ่งคืออะไรและทำไมฉันถึงใช้อันหนึ่งมากกว่าอีกอันหนึ่ง? ใครช่วยอธิบายสิ่งนี้ให้ฉันได้ไหม

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);
});

ดู:

.append()ใส่ข้อมูลในองค์ประกอบที่last indexและ
.prepend()ใส่องค์ประกอบที่เติมไว้ที่first index

สมมติ:

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

เมื่อ.append()ดำเนินการจะมีลักษณะเช่นนี้:

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

หลังจากดำเนินการ:

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

ซอด้วย. ผนวก () ในการดำเนินการ

เมื่อ.prepend()ดำเนินการจะมีลักษณะเช่นนี้:

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

หลังจากดำเนินการ:

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

ซอกับ. prepend () ในการดำเนินการ

.after()ใส่องค์ประกอบหลังจากองค์ประกอบ
.before()ใส่องค์ประกอบก่อนองค์ประกอบ

ใช้หลังจาก:

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

หลังจากดำเนินการ:

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

ซอกับ. after () ในการดำเนินการ

ใช้ก่อน:

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

หลังจากดำเนินการ:

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

ซอกับ. before () ในการดำเนินการ

ภาพนี้แสดงด้านล่างจะช่วยให้ความเข้าใจอย่างชัดเจนและแสดงให้เห็นความแตกต่างแน่นอนระหว่าง.append(), .prepend(), .after()และ.before()

คุณสามารถดูได้จากภาพนั้น.append()และ.prepend()เพิ่มองค์ประกอบใหม่เป็นองค์ประกอบลูก(สีน้ำตาล)ไปยังเป้าหมาย

และ.after()และ.before()เพิ่มองค์ประกอบใหม่เป็นพี่น้ององค์ประกอบ(สีดำสี)ไปยังเป้าหมาย

นี่คือDEMOเพื่อความเข้าใจที่ดีขึ้น

แก้ไข: รุ่นพลิกของฟังก์ชั่นเหล่านั้น:

ใช้รหัสนี้ :

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);

ในเป้าหมายนี้:

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

ดังนั้นแม้ว่าฟังก์ชั่นเหล่านี้จะเรียงลำดับพารามิเตอร์กัน แต่แต่ละฟังก์ชันก็สร้างองค์ประกอบซ้อนกัน:

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

... แต่พวกเขากลับองค์ประกอบที่แตกต่าง เรื่องนี้สำหรับวิธีการผูกมัด

append()& prepend()สำหรับการแทรกเนื้อหาภายในองค์ประกอบ (ทำให้เนื้อหาเป็นเนื้อหาย่อย) ในขณะที่after()& before()แทรกเนื้อหาด้านนอกองค์ประกอบ (ทำให้เนื้อหาเป็นพี่น้องกัน)

วิธีที่ดีที่สุดคือไปที่เอกสาร

.append() VS .after()

• . append(): แทรกเนื้อหาที่ระบุโดยพารามิเตอร์ไปยังจุดสิ้นสุดของแต่ละองค์ประกอบในชุดขององค์ประกอบที่ตรงกัน
• . after(): แทรกเนื้อหาที่ระบุโดยพารามิเตอร์หลังแต่ละองค์ประกอบในชุดขององค์ประกอบที่ตรงกัน

.prepend() VS .before()

• prepend(): แทรกเนื้อหาที่ระบุโดยพารามิเตอร์ไปที่จุดเริ่มต้นของแต่ละองค์ประกอบในชุดขององค์ประกอบที่ตรงกัน
• . before(): แทรกเนื้อหาที่ระบุโดยพารามิเตอร์หน้าแต่ละองค์ประกอบในชุดขององค์ประกอบที่ตรงกัน

ดังนั้นผนวกและเสริมหมายถึงลูกของวัตถุในขณะที่หลังและก่อนหมายถึงพี่น้องของวัตถุ

มีความแตกต่างพื้นฐานระหว่าง.append()และ.after()และ.prepend()และ.before()และ

.append()เพิ่มองค์ประกอบของพารามิเตอร์ภายในแท็กขององค์ประกอบตัวเลือกที่ส่วนท้ายสุดในขณะที่.after()เพิ่มองค์ประกอบของพารามิเตอร์หลังแท็กขององค์ประกอบหลังแท็กองค์ประกอบของ

รองในทางกลับกันสำหรับการและ.prepend().before()

ซอ

ไม่มีข้อได้เปรียบพิเศษสำหรับแต่ละคน มันขึ้นอยู่กับสถานการณ์ของคุณโดยสิ้นเชิง รหัสด้านล่างแสดงความแตกต่าง

    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>    

ลองนึกภาพDOM (หน้า HTML) เป็นแผนผังที่ถูกต้อง องค์ประกอบ HTML เป็นโหนดของต้นไม้นี้

การappend()เพิ่มโหนดใหม่ให้childกับโหนดที่คุณเรียกใช้

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

creates a child node <p> to <div>

การafter()เพิ่มโหนดใหม่เป็น sibling หรือที่ระดับเดียวกันหรือชายด์กับพาเรนต์ของโหนดที่คุณเรียกใช้

หากต้องการลองตอบคำถามหลักของคุณ:

ทำไมคุณถึงใช้. append () แทน. after () หรือข้ออื่น ๆ

เมื่อคุณจัดการ DOM ด้วย jQuery วิธีการที่คุณใช้จะขึ้นอยู่กับผลลัพธ์ที่คุณต้องการและการใช้งานบ่อยครั้งคือการแทนที่เนื้อหา

ในการแทนที่เนื้อหาที่คุณต้องการ.remove()เนื้อหาและแทนที่ด้วยเนื้อหาใหม่ หากคุณ.remove()เป็นแท็กที่มีอยู่แล้วลองใช้.append()มันจะไม่ทำงานเนื่องจากแท็กนั้นถูกลบไปแล้ว แต่ถ้าคุณใช้.after()เนื้อหาใหม่จะถูกเพิ่ม 'นอก' แท็ก (ลบแล้ว) และไม่ได้รับผลกระทบจากก่อนหน้านี้.remove().