นี่คือโค้ดตัวอย่างบางส่วน:

function addTextNode(){
    var newtext = document.createTextNode(" Some text added dynamically. ");
    var para = document.getElementById("p1");
    para.appendChild(newtext);
    $("#p1").append("HI");
}

<div style="border: 1px solid red">
    <p id="p1">First line of paragraph.<br /></p>
</div>

อะไรคือความแตกต่างระหว่างappend()และappendChild()?
สถานการณ์แบบเรียลไทม์?

ความแตกต่างที่สำคัญappendChildคือเป็นวิธี DOM และappendเป็นวิธี jQuery อันที่สองใช้อันแรกตามที่คุณเห็นในซอร์สโค้ด jQuery

append: function() {
    return this.domManip(arguments, true, function( elem ) {
        if ( this.nodeType === 1 || this.nodeType === 11 || this.nodeType === 9 ) {
            this.appendChild( elem );
        }
    });
},

หากคุณใช้ไลบรารี jQuery ในโปรเจ็กต์ของคุณคุณจะปลอดภัยเสมอappendเมื่อใช้เพิ่มองค์ประกอบในเพจ

ไม่อีกต่อไป

ตอนนี้ผนวกเป็นวิธีการใน JavaScript

เอกสาร MDN เกี่ยวกับวิธีการผนวก

อ้างถึง MDN

ParentNode.appendวิธีการแทรกชุดของโหนดวัตถุหรือวัตถุหลังจากที่เด็กสุดท้ายของDOMString วัตถุถูกแทรกเป็นโหนดข้อความที่เทียบเท่าParentNodeDOMString

IE และ Edge ไม่รองรับ แต่ Chrome (54+), Firefox (49+) และ Opera (39+)

ภาคผนวกของ JavaScript คล้ายกับการผนวกของ jQuery

คุณสามารถส่งผ่านหลายอาร์กิวเมนต์

var elm = document.getElementById('div1');
elm.append(document.createElement('p'),document.createElement('span'),document.createElement('div'));
console.log(elm.innerHTML);

<div id="div1"></div>

append เป็นวิธีการ jQuery เพื่อต่อท้ายเนื้อหาหรือ HTML เข้ากับองค์ประกอบ

$('#example').append('Some text or HTML');

appendChild เป็นวิธี DOM ที่บริสุทธิ์สำหรับการเพิ่มองค์ประกอบลูก

document.getElementById('example').appendChild(newElement);

ฉันรู้ว่านี่เป็นคำถามเก่าและมีคำตอบและฉันไม่ได้กำลังมองหาการโหวตฉันแค่ต้องการเพิ่มสิ่งเล็ก ๆ น้อย ๆ ที่ฉันคิดว่าอาจช่วยผู้มาใหม่ได้

ใช่appendChildเป็นDOMวิธีการและappendเป็นวิธีการ JQuery แต่ในทางปฏิบัติความแตกต่างที่สำคัญคือappendChildใช้โหนดเป็นพารามิเตอร์โดยที่ฉันหมายถึงถ้าคุณต้องการเพิ่มย่อหน้าว่างใน DOM คุณต้องสร้างpองค์ประกอบนั้นก่อน

var p = document.createElement('p')

จากนั้นคุณสามารถเพิ่มลงใน DOM ในขณะที่ JQuery appendสร้างโหนดนั้นให้คุณและเพิ่มลงใน DOM ได้ทันทีไม่ว่าจะเป็นองค์ประกอบข้อความหรือองค์ประกอบ html หรือการรวมกัน!

$('p').append('<span> I have been appended </span>');

appendChildเป็นฟังก์ชันDOM vanilla-js

append เป็นฟังก์ชัน jQuery

พวกเขาแต่ละคนมีนิสัยใจคอของตัวเอง

appendChildเป็นบริสุทธิ์JavaScriptวิธีการที่เป็นappendเป็นjQueryวิธี

appendchild JavaScriptวิธีจะสามารถใช้ต่อท้ายรายการที่จะเป็นอีกหนึ่งปัจจัย jQuery ผนวกองค์ประกอบไม่ทำงานเหมือนกัน แต่แน่นอนในจำนวนน้อยของสาย:

ให้เรายกตัวอย่างเพื่อต่อท้ายรายการในรายการ:

ก) ด้วย JavaScript

var n= document.createElement("LI");                 // Create a <li> node
var tn = document.createTextNode("JavaScript");      // Create a text node
n.appendChild(tn);                                   // Append the text to <li>
document.getElementById("myList").appendChild(n);  

b) ด้วย jQuery

$("#myList").append("<li>jQuery</li>")