jQuery append () vs appendChild ()

100

Berikut beberapa contoh kode:

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>

Apa perbedaan antara append()dan appendChild()?
Ada skenario waktu nyata?

pengguna2067567
sumber
Salah satunya adalah metode jQuery, yang lainnya adalah metode JS asli, keduanya melakukan hal yang hampir sama, tetapi append () menerima banyak elemen.
adeneo
Bagian bawah menggunakan pustaka (misalnya jQuery yang biasa direferensikan), bagian atas menggunakan metode DOM "asli" untuk menambahkan elemen.
Qantas 94 Heavy

Jawaban:

106

Perbedaan utamanya adalah appendChildmetode DOM dan appendmerupakan metode jQuery. Yang kedua menggunakan yang pertama seperti yang Anda lihat pada kode sumber jQuery

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

Jika Anda menggunakan pustaka jQuery pada proyek Anda, Anda akan selalu aman menggunakannya appendsaat menambahkan elemen ke halaman.

Claudio Redi
sumber
Tahukah Anda mengapa append "aman" dan appendChild tidak? Apa yang dilakukan domManip?
Rob Fox
2
@RobFox: dengan aman Saya bermaksud mengatakan bahwa jika Anda menggunakan jquery maka Anda aman untuk menggunakan selalu append (tidak ada situasi di mana appendchild DOM lebih disukai). Sehubungan dengan domManip, tampaknya tujuan utamanya adalah menggunakan DOM DocumentFragments. Di sini Anda memiliki deskripsi metode dan di sini Anda memiliki kata resmi John Resig tentang motivasi di balik penggunaan fragmen
Claudio Redi
4
javascript juga memiliki ParentNode.append()sekarang. silakan cek jawaban @ SagarV untuk info lebih lanjut.
Jo E.
Saya akan mengatakan hal yang sama dengan @JoE. : lihat ParentNode.append () .
Lonnie Best
47

Tidak lagi

sekarang menambahkan adalah metode dalam JavaScript

Dokumentasi MDN tentang metode penambahan

Mengutip MDN

The ParentNode.appendMetode memasukkan satu set dari Node objek atau DOMStringbenda setelah anak terakhir dari ParentNode. DOMStringobjek disisipkan sebagai node Teks yang setara.

Ini tidak didukung oleh IE dan Edge tetapi didukung oleh Chrome (54+), Firefox (49+) dan Opera (39+).

Append JavaScript mirip dengan append jQuery.

Anda dapat memberikan banyak argumen.

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

Sagar V
sumber
4
MDN tidak memberitahu apa yang sekarang ada di javascript, spesifikasi ES tidak
Raimonds
18

append adalah metode jQuery untuk menambahkan beberapa konten atau HTML ke elemen.

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

appendChild adalah metode DOM murni untuk menambahkan elemen anak.

document.getElementById('example').appendChild(newElement);
Fenton
sumber
9

Saya tahu ini adalah pertanyaan lama dan sudah terjawab dan saya tidak mencari suara. Saya hanya ingin menambahkan hal kecil tambahan yang menurut saya dapat membantu pendatang baru.

ya appendChildadalah DOMmetode dan metode appendJQuery tetapi perbedaan utamanya adalah appendChildmengambil node sebagai parameter yang saya maksud jika Anda ingin menambahkan paragraf kosong ke DOM, Anda perlu membuat pelemen itu terlebih dahulu

var p = document.createElement('p')

lalu Anda dapat menambahkannya ke DOM sedangkan JQuery appendmembuat simpul itu untuk Anda dan menambahkannya ke DOM segera apakah itu elemen teks atau elemen html atau kombinasi!

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

kapreski
sumber
5

appendChildadalah fungsi DOM vanilla-js .

append adalah fungsi jQuery.

Mereka masing-masing memiliki kebiasaan mereka sendiri.

Naftali alias Neal
sumber
0

appendChildadalah murni javascript metode dimana sebagai appendadalah jQuery metode.

Krishna
sumber
0

The JavaScript appendChild metode dapat digunakan untuk menambahkan item ke unsur lain. The jQuery Append elemen melakukan pekerjaan yang sama tetapi tentu jumlahnya kurang dari baris:

Mari kita ambil contoh untuk menambahkan item dalam daftar:

a) Dengan 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) Dengan jQuery

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