JavaScript adalah bahasa pemrograman serbaguna yang memungkinkan pembuatan dan manipulasi elemen yang sama seperti HTML (Hyper Text Markup Language). Ini mengikuti metode “append()” dan “appendChild()” untuk melakukan fungsi ini. Seperti namanya, kedua metode menambahkan elemen HTML seperti objek String atau Node. Namun, mereka berbeda satu sama lain tergantung pada fungsi dan faktor lainnya.
Panduan ini menggarisbawahi perbedaan utama antara jQuery “ menambahkan ()” dan JavaScript “ appendChild ()” metode.
Sebelum beralih ke perbedaan antara jQuery “ menambahkan ()” dan JavaScript “ appendChild ()” metode, pertama lihat dasar-dasar metode ini.
Apa metode append() jQuery?
jQuery “ menambahkan ()” metode menyisipkan objek “Node” dan “String” yang diinginkan di bagian akhir sebagai anak terakhir dari elemen induk.
Sintaksis
$ ( pemilih ) . menambahkan ( isi , fungsi ( indeks , html ) )Dalam sintaks di atas:
- isi : Mengacu pada elemen HTML, elemen DOM, atau objek jQuery.
- fungsi : Ini adalah parameter tambahan yang menentukan fungsi JavaScript yang ditentukan pengguna yang memiliki parameter 'indeks (posisi elemen)' dan 'html (html elemen yang dipilih)'.
Apa metode JavaScript appendChild()?
Metode “appendChild()” hanya menambahkan objek “Node” setelah anak terakhir dari elemen induk. Ini pertama-tama membuat objek Node yang diinginkan menggunakan metode 'createElement()' dan kemudian menambahkannya.
Sintaksis
elemen. appendChild ( simpul )Sintaks ini hanya membutuhkan satu parameter yaitu, “ simpul ”.
Seperti namanya, metode yang dibahas di atas berbeda satu sama lain. Bagian ini menjelaskan beberapa faktor yang membedakannya. Mari kita lihat mereka.
Perbedaan Antara Metode jQuery append() dan JavaScript appendChild()
| Ketentuan | jQuery menambahkan() | JavaScript appendChild() |
|---|---|---|
| Penggunaan | Ini dapat digunakan untuk menambahkan elemen induk dengan menambahkan “ Node ' Dan ' Rangkaian ” objek pada saat yang bersamaan. | Itu hanya dapat digunakan untuk menambahkan elemen induk dengan ' baru Node ” dibuat menggunakan “ createElement ()' metode. |
| Beberapa Objek Node | “ menambahkan ()” metode dapat menambahkan beberapa objek Node dalam elemen induk terkait pada saat yang sama dalam format berikut. Format : 'div.append(anak pertama, anak kedua, 'Linuxhint');' |
“ appendChild ()” metode bekerja dengan baik dengan beberapa objek Node tetapi hanya menambahkan anak pertama pada satu waktu dan kemudian yang berikutnya. Format : 'div.appendChild(anak pertama, anak kedua, 'Linuxhint');' |
| Nilai Pengembalian | “ menambahkan ()” metode tidak mengembalikan objek Node yang ditambahkan karena menunjukkan nilai yang dikembalikan “tidak terdefinisi” yaitu Format : console.log(appendChildValue) // tidak terdefinisi |
Di sisi lain, “ appendChild ()” mengembalikan nilai yang berisi objek Node yang ditambahkan. Format : console.log(appendChildValue) //
|
Sekarang lanjutkan ke implementasi praktis dari perbedaan utama yang terdaftar.
Perbedaan 1: Menerapkan metode jQuery append() dan JavaScript appendChild()
Menurut perbedaan pertama, “ menambahkan ()” metode menambahkan Node dan String sementara metode “appendChild()” hanya menambahkan objek Node.
Kode HTML
Pertama, lihat kode HTML yang disebutkan:
< tubuh >< h2 > Metode jQuery 'tambahkan ()'. < / h2 > //untuk menambahkan() < h2 > Metode jQuery 'appendChild()'. < / h2 > //Untuk appendChild()
< tombol pengenal = 'btn1' onclick = 'myFunc1()' > Tambahkan String DOM < / tombol >
< tombol pengenal = 'btn2' onclick = 'myFunc2()' > Tambahkan Node DOM < / tombol >
< P pengenal = 'untuk' > Ini adalah sebuah paragraf. < / P >
< ol pengenal = 'daftar' >
< itu > Tutorial JavaScript 1 < / itu >
< itu > Tutorial JavaScript 2 < / itu >
< itu > Tutorial JavaScript 3 < / itu >
< / ol >
< / tubuh >
Pada baris kode di atas:
- Tag “
” mendefinisikan subjudul level 2.
- Tag “
- Tag “
” membuat paragraf kosong dengan id “para” yang ditetapkan untuk menampilkan nilai string yang ditambahkan.
- Tag “
- ” menambahkan daftar yang diurutkan dengan id “daftar”, dan item yang terdaftar dengan bantuan tag “
- ”.
Catatan : Ikuti kode HTML yang ditulis di atas dalam perbedaan pertama dari kedua metode “append()” dan “appendChild()”.
'tambahkan ()' Metode Kode jQuery
Pertama, ikhtisar kode jQuery metode 'append ()':
< kepala >< skrip src = 'https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js' > naskah >
< naskah >
$ ( dokumen ) . siap ( fungsi ( ) {
$ ( '#btn1' ) . klik ( fungsi ( ) {
$ ( 'P' ) . menambahkan ( ' String yang Ditambahkan .' ) ;
} ) ;
$ ( '#btn2' ) . klik ( fungsi ( ) {
$ ( 'ol' ) . menambahkan ( '
} ) ;
} ) ;
naskah >
kepala >
Pada baris kode di atas:
- Pertama, tentukan jQuery “ CDN ” path dari situs resminya “ https://jquery.com/ ” dengan bantuan “ src ” atribut.
- Selanjutnya, tambahkan bagian skrip kecil yang terlebih dahulu menggunakan “ siap ()” metode untuk memohon pernyataan “ fungsi ()” saat dokumen HTML dimuat.
- Setelah itu, “ klik ()” metode mengeksekusi fungsi yang terkait dengan tombol yang id adalah “ btn1 ” pada klik tombol.
- Dalam definisi fungsi, “ menambahkan ()” digunakan untuk menambahkan elemen paragraf yang ditargetkan dengan string yang dinyatakan.
- Proses yang sama dilakukan untuk penambahan “ Daftar pesanan ” yaitu, objek Node untuk menambahkannya ke item yang diberikan.
Keluaran
Di sini, dipastikan bahwa objek 'String' dan 'Node' ditambahkan dengan bantuan metode 'append()'.
Kode JavaScript Metode 'appendChild()'.
Sekarang, lihat metode JavaScript “appendChild()” secara praktis:
< naskah >fungsi myFunc1 ( ) {
untuk. appendChild ( '
String yang Ditambahkan
' ) //Tambahkan String DOM} fungsi myFunc2 ( ) {
const elemen = dokumen. createElement ( 'itu' ) ;
const simpul = dokumen. createTextNode ( 'Item Tambahan' ) ;
elemen. appendChild ( simpul ) ; //Tambahkan DOM Node
const elemen = dokumen. getElementById ( 'daftar' ) ;
elemen. appendChild ( elemen ) ;
}
naskah >
Dalam cuplikan kode di atas:
- Tentukan nama fungsi “ myFunc1 ()” yang menggunakan metode “appendChild()” untuk menambahkan paragraf yang ditambahkan dengan string yang diberikan.
- Selanjutnya, di “ myFunc2 ()”, metode “createElement()” membuat elemen daftar baru dan kemudian menambahkan beberapa teks ke dalamnya menggunakan metode “createTextNode()”.
- Setelah itu, tambahkan simpul daftar yang dibuat dengan teksnya menggunakan metode “appendChild()”.
- Terakhir, tambahkan Node daftar yang baru dibuat ke daftar pesanan yang diakses yang id-nya adalah 'daftar' dengan bantuan metode 'appendChild()'.
Keluaran
Seperti yang terlihat, hanya objek 'Node' yang ditambahkan pada klik tombol, bukan 'String'.
Kesalahan
Tekan 'F12' untuk membuka konsol web dan memeriksa masalahnya:
Seperti yang terlihat, konsol menunjukkan kesalahan saat menambahkan objek String menggunakan metode 'appendChild()'. Oleh karena itu, dipastikan bahwa metode “appendChild()” tidak menambahkan objek String.
Perbedaan 2: Menerapkan metode jQuery append() dan JavaScript appendChild() pada Beberapa Objek Node
Perbedaan kedua antara metode “append()” dan “appendChild()” dapat dianalisis dengan melakukan metode ini pada beberapa objek node. Untuk melihat implementasi praktisnya, ikuti kode-kode yang diberikan.
Kode HTML
Mari kita lihat kode HTML:
< div pengenal = 'div utama' >< div gaya = 'display:flex; justify-content:center; align-items:center; width:50px; height:50px; background:orangered; margin:10px; text-align:center;' > Satu < / div >
< div gaya = 'display:flex; justify-content:center; align-items:center; width:50px; height:50px; background:orangered; margin:10px; text-align:center;' > Dua < / div >
< div gaya = 'display:flex; justify-content:center; align-items:center; width:50px; height:50px; background:orangered; margin:10px; text-align:center;' > Tiga < / div >
< / div >
Di sini, baris kode di atas berisi elemen “
Catatan : Kode HTML yang ditulis di atas diikuti dalam perbedaan kedua metode “append()” dan “appendChild()”.
tambahkan() Metode
Sekarang, lanjutkan dengan skrip berikut:
< naskah >const maindiv = dokumen. getElementById ( 'div utama' ) ;
const div4 = dokumen. createElement ( 'div' ) ;
div4. innerHTML = 'Empat' ;
div4. gaya . warna latar belakang = 'Merah Jambu' ;
div4. Daftar kelas . menambahkan ( 'div' ) ; const div5 = dokumen. createElement ( 'div' ) ;
div5. innerHTML = 'Lima' ;
div5. gaya . warna latar belakang = 'Merah Jambu' ;
div5. Daftar kelas . menambahkan ( 'div' ) ;
maindiv. menambahkan ( div4 , div5 ) ;
naskah >
Dalam cuplikan kode di atas:
- Variabel 'maindiv' mengakses 'div' yang ditambahkan menggunakan id 'main-div' -nya dengan bantuan metode 'getElementById()'.
- Selanjutnya, metode “createElement()” membuat objek Node “div” baru, menambahkan teks yang ditentukan menggunakan properti “innerHTML”, dan menerapkan warna latar belakang melalui properti “style.backgroundcolor”.
- Setelah itu, metode “add()” menambahkan properti kelas CSS tertentu ke dalamnya menggunakan properti “classList”.
- Prosedur yang sama diikuti untuk elemen “” yang baru dibuat berikutnya.
- Terakhir, kedua objek Node yang baru dibuat ditambahkan pada saat yang sama dengan bantuan metode “append()”.
Keluaran
Di sini, beberapa objek Node yang baru dibuat ditambahkan ke elemen induk yang sama.
Metode 'appendChild()'.
Selanjutnya, lanjutkan dengan metode “appendChild()”:
< naskah >
maindiv. appendChild ( div4 ) ;
maindiv. appendChild ( div5 ) ;
naskah >Seperti yang terlihat, metode “appendChild()” menambahkan beberapa objek Node satu per satu ke elemen induk yang sama.
Keluaran
Outputnya sama dengan metode “append()” tetapi berbeda dalam menentukan objek Node.
Perbedaan 3: Nilai Pengembalian Metode jQuery append() dan JavaScript appendChild() Terapan
Perbedaan terakhir adalah “nilai yang dikembalikan” dari metode “append()” dan “appendChild()”. Mari kita lihat secara praktis.
Catatan : Kode HTML sama dengan Perbedaan 2 (Objek Node Berganda).
Metode 'tambahkan ()'.
Lihatlah baris kode yang diberikan:
< naskah >
menghibur. catatan ( maindiv. menambahkan ( div4 ) ) ;
naskah >Di sini, metode 'console.log()' diterapkan untuk memeriksa nilai yang dikembalikan dari metode 'append()' sambil menambahkan objek Node yang ditentukan.
Keluaran
Tekan 'F12' untuk membuka konsol web:
Seperti yang terlihat, nilai yang dikembalikan dari metode “append()” adalah “ belum diartikan ”.
metode appendChild()
Sekarang, perhatikan kode berikut menggunakan metode “appendChild()”:
< naskah >
menghibur. catatan ( maindiv. appendChild ( div4 ) ) ;
naskah >Tentukan metode “appendChild()” dengan metode “console.log()” yang sama dengan metode “append()”.
Keluaran
Di sini, output mengembalikan elemen HTML yang ditambahkan termasuk properti gaya.
Kesimpulan
jQuery “ menambahkan ()” dan JavaScript “ appendChild ()” metode berbeda berdasarkan “ sintaks', 'penggunaan', dan 'beberapa objek Node ”. Selain itu, “ nilai yang dikembalikan ” juga berbeda satu sama lain. Kedua metode tersebut berguna dan penggunaannya bergantung pada pilihan pengguna. Panduan ini mencantumkan perbedaan antara jQuery “ menambahkan ()” dan JavaScript “ appendChild ()” secara praktis.