JavaScript ialah bahasa pengaturcaraan serba boleh yang membolehkan penciptaan dan manipulasi elemen sama seperti HTML (Hyper Text Markup Language). Ia mengikut kaedah 'append()' dan 'appendChild()' untuk melaksanakan fungsi ini. Seperti namanya, kedua-dua kaedah menambahkan elemen HTML seperti objek String atau Node. Walau bagaimanapun, mereka berbeza antara satu sama lain bergantung pada fungsi mereka dan faktor lain.
Panduan ini menggariskan perbezaan utama antara jQuery ' tambahkan ()' dan JavaScript ' appendChild ()” kaedah.
Sebelum beralih kepada perbezaan antara jQuery ' tambahkan ()' dan JavaScript ' appendChild ()', mula-mula lihat asas kaedah ini.
Apakah Kaedah jQuery append()?
jQuery ' tambahkan ()' menyisipkan objek 'Nod' dan 'String' yang dikehendaki pada penghujung sebagai anak terakhir elemen induk.
Sintaks
$ ( pemilih ) . tambahkan ( kandungan , fungsi ( indeks , html ) )Dalam sintaks di atas:
- kandungan : Ia merujuk kepada elemen HTML, elemen DOM atau objek jQuery.
- fungsi : Ia adalah parameter tambahan yang menentukan fungsi JavaScript yang ditentukan pengguna yang mempunyai parameter 'indeks (kedudukan elemen)' dan 'html (html elemen terpilih)'.
Apakah Kaedah JavaScript appendChild()?
Kaedah 'appendChild()' hanya menambah objek 'Nod' selepas anak terakhir elemen induk. Ia mula-mula mencipta objek Nod yang dikehendaki menggunakan kaedah 'createElement()' dan kemudian menambahkannya.
Sintaks
unsur. appendChild ( nod )Sintaks ini hanya memerlukan satu parameter iaitu, “ nod ”.
Seperti yang dicadangkan oleh nama mereka, kaedah yang dibincangkan di atas adalah berbeza antara satu sama lain. Bahagian ini menerangkan beberapa faktor yang berbeza. Mari kita lihat mereka.
Perbezaan Antara Kaedah jQuery append() dan JavaScript appendChild().
| Syarat | jQuery append() | JavaScript appendChild() |
|---|---|---|
| Penggunaan | Ia boleh digunakan untuk menambahkan elemen induk dengan menambah “ baru Nod ” dan “ Tali ” objek pada masa yang sama. | Ia hanya boleh digunakan untuk menambahkan elemen induk oleh “ baru Nod ” dibuat menggunakan “ createElement ()” kaedah. |
| Objek Berbilang Nod | ' tambahkan ()” kaedah boleh menambah berbilang objek Nod dalam elemen induknya yang berkaitan pada masa yang sama dalam format berikut. Format : “div.append(anak pertama, anak kedua, ‘Linuxhint’);” |
' appendChild ()” kaedah berfungsi dengan baik dengan berbilang objek Nod tetapi ia hanya menambahkan anak pertama pada satu masa dan kemudian yang seterusnya. Format : “div.appendChild(anak pertama, anak kedua, ‘Linuxhint’);” |
| Nilai Pulangan | ' tambahkan ()' kaedah tidak mengembalikan objek Nod yang dilampirkan kerana ia menunjukkan nilai yang dikembalikan 'tidak ditentukan' i.e. Format : console.log(appendChildValue) // tidak ditentukan |
Sebaliknya, ' appendChild ()” kaedah mengembalikan nilai yang mengandungi objek Nod yang dilampirkan. Format : console.log(appendChildValue) //
|
Sekarang beralih kepada pelaksanaan praktikal perbezaan utama yang disenaraikan.
Perbezaan 1: Menggunakan Kaedah jQuery append() dan JavaScript appendChild()
Menurut perbezaan pertama, ' tambahkan ()' kaedah menambahkan kedua-dua Nod dan String manakala kaedah 'appendChild()' hanya menambahkan objek Nod.
Kod HTML
Pertama, lihat kod HTML yang dinyatakan:
< badan >< h2 > Kaedah 'tambah ()' jQuery < / h2 > //Untuk tambah() < h2 > Kaedah 'appendChild()' jQuery < / h2 > //Untuk appendChild()
< butang ID = 'btn1' onclick = 'myFunc1()' > Tambahkan Rentetan DOM < / butang >
< butang ID = 'btn2' onclick = 'myFunc2()' > Tambahkan Nod DOM < / butang >
< hlm ID = 'untuk' > Ini adalah perenggan. < / hlm >
< ol ID = 'senarai' >
< itu > Tutorial JavaScript 1 < / itu >
< itu > Tutorial JavaScript 2 < / itu >
< itu > Tutorial JavaScript 3 < / itu >
< / ol >
< / badan >
Dalam baris kod di atas:
- Teg “
” mentakrifkan subtajuk tahap 2.
- Teg '
- Teg '
' mencipta perenggan kosong dengan id 'para' yang ditetapkan untuk menunjukkan nilai rentetan yang dilampirkan.
- Teg “
- ” menambah senarai tersusun dengan id “senarai”, dan item tersenarai dengan bantuan teg “
- ”.
Catatan : Ikut kod HTML yang ditulis di atas dalam perbezaan pertama kedua-dua kaedah “append()” dan “appendChild()”.
Kod jQuery Kaedah 'tambah()'.
Pertama, gambaran keseluruhan kod jQuery kaedah 'tambah()':
< kepala >< skrip src = 'https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js' > skrip >
< skrip >
$ ( dokumen ) . sedia ( fungsi ( ) {
$ ( '#btn1' ) . klik ( fungsi ( ) {
$ ( 'p' ) . tambahkan ( ' Tambahan Rentetan .' ) ;
} ) ;
$ ( '#btn2' ) . klik ( fungsi ( ) {
$ ( 'ol' ) . tambahkan ( '
} ) ;
} ) ;
skrip >
kepala >
Dalam baris kod di atas:
- Pertama, nyatakan jQuery ' CDN 'laluan daripada laman web rasminya' https://jquery.com/ ” dengan bantuan “ src ” atribut.
- Seterusnya, tambahkan bahagian skrip kecil yang pertama kali menggunakan ' sedia ()' kaedah untuk menggunakan yang dinyatakan ' fungsi ()” apabila dokumen HTML dimuatkan.
- Selepas itu, ' klik ()' kaedah melaksanakan fungsi yang dipautkan dengan butang yang idnya ialah ' btn1 ” apabila butang klik.
- Dalam definisi fungsi, ' tambahkan ()” kaedah digunakan untuk menambahkan elemen perenggan yang disasarkan dengan rentetan yang dinyatakan.
- Proses yang sama dilakukan untuk penambahan “ senarai pesanan ” iaitu, objek Nod untuk menambahkannya pada item yang diberikan.
Pengeluaran
Di sini, ia disahkan bahawa kedua-dua objek 'String' dan 'Nod' dilampirkan dengan bantuan kaedah 'append()'.
Kod JavaScript Kaedah 'appendChild()'.
Sekarang, lihat kaedah JavaScript 'appendChild()' secara praktikal:
< skrip >fungsi myFunc1 ( ) {
untuk. appendChild ( '
Rentetan yang Dilampirkan
' ) //Tambah Rentetan DOM} fungsi myFunc2 ( ) {
const unsur = dokumen. createElement ( 'itu' ) ;
const nod = dokumen. createTextNode ( 'Item yang Dilampirkan' ) ;
unsur. appendChild ( nod ) ; //Tambahkan Nod DOM
const unsur = dokumen. getElementById ( 'senarai' ) ;
unsur. appendChild ( unsur ) ;
}
skrip >
Dalam coretan kod di atas:
- Tentukan nama fungsi ' myFunc1 ()' yang menggunakan kaedah 'appendChild()' untuk menambahkan perenggan yang ditambahkan dengan rentetan yang diberikan.
- Seterusnya, dalam “ myFunc2 ()', kaedah 'createElement()' mencipta elemen senarai baharu dan kemudian menambah beberapa teks padanya menggunakan kaedah 'createTextNode()'.
- Selepas itu, tambahkan nod senarai yang dibuat dengan teksnya menggunakan kaedah 'appendChild()'.
- Akhir sekali, tambahkan senarai Nod yang baru dibuat pada senarai pesanan yang diakses yang idnya ialah 'senarai' dengan bantuan kaedah 'appendChild()'.
Pengeluaran
Seperti yang dilihat, hanya objek 'Nod' yang dilampirkan pada klik butang, bukan 'String'.
ralat
Tekan 'F12' untuk membuka konsol web dan periksa masalah:
Seperti yang dilihat, konsol menunjukkan ralat pada menambahkan objek String menggunakan kaedah 'appendChild()'. Oleh itu, ia disahkan bahawa kaedah 'appendChild()' tidak menambahkan objek String.
Perbezaan 2: Menggunakan Kaedah jQuery append() dan JavaScript appendChild() Pada Pelbagai Objek Nod
Perbezaan kedua antara kaedah 'append()' dan 'appendChild()' boleh dianalisis dengan melaksanakan kaedah ini pada berbilang objek nod. Untuk melihat pelaksanaan praktikalnya, ikuti kod yang diberikan.
Kod HTML
Mari lihat kod HTML:
< div ID = 'div utama' >< div gaya = 'display:flex; justify-content:center; align-item:center; width:50px; height:50px; background:orened; margin:10px; text-align:center;' > satu < / div >
< div gaya = 'display:flex; justify-content:center; align-item:center; width:50px; height:50px; background:orened; margin:10px; text-align:center;' > dua < / div >
< div gaya = 'display:flex; justify-content:center; align-item:center; width:50px; height:50px; background:orened; margin:10px; text-align:center;' > Tiga < / div >
< / div >
Di sini, baris kod di atas mengandungi elemen '
Catatan : Kod HTML yang ditulis di atas diikuti dalam perbezaan kedua kedua-dua kaedah 'append()' dan 'appendChild()'.
Append() Kaedah
Sekarang, teruskan dengan skrip berikut:
< skrip >const maindiv = dokumen. getElementById ( 'div utama' ) ;
const div4 = dokumen. createElement ( 'div' ) ;
div4. innerHTML = 'Empat' ;
div4. gaya . warna latar belakang = 'merah jambu' ;
div4. Senarai kelas . Tambah ( 'div' ) ; const div5 = dokumen. createElement ( 'div' ) ;
div5. innerHTML = 'Lima' ;
div5. gaya . warna latar belakang = 'merah jambu' ;
div5. Senarai kelas . Tambah ( 'div' ) ;
maindiv. tambahkan ( div4 , div5 ) ;
skrip >
Dalam coretan kod di atas:
- Pembolehubah 'maindiv' mengakses 'div' yang ditambahkan menggunakan id 'main-div' dengan bantuan kaedah 'getElementById()'.
- Seterusnya, kaedah 'createElement()' mencipta objek Nod 'div' baharu, menambah teks yang ditentukan menggunakan sifat 'innerHTML' dan menggunakan warna latar belakang melalui sifat 'style.backgroundcolor'.
- Selepas itu, kaedah 'add()' menambah sifat CSS kelas yang ditentukan padanya menggunakan sifat 'classList'.
- Prosedur yang sama diikuti untuk elemen '' yang baru dibuat seterusnya.
- Akhir sekali, kedua-dua objek Node yang baru dibuat dilampirkan pada masa yang sama dengan bantuan kaedah 'tambah()'.
Pengeluaran
Di sini, berbilang objek Node yang baru dibuat dilampirkan pada elemen induk yang sama dengan sewajarnya.
Kaedah 'appendChild()'.
Seterusnya, teruskan dengan kaedah 'appendChild()':
< skrip >
maindiv. appendChild ( div4 ) ;
maindiv. appendChild ( div5 ) ;
skrip >Seperti yang dilihat, kaedah 'appendChild()' menambah berbilang objek Nod satu demi satu kepada elemen induk yang sama.
Pengeluaran
Output adalah sama dengan kaedah 'append()' tetapi berbeza dalam menentukan objek Nod.
Perbezaan 3: Nilai Pulangan bagi Kaedah Applied jQuery append() dan JavaScript appendChild()
Perbezaan terakhir ialah 'nilai yang dikembalikan' kaedah 'tambah()' dan 'appendChild()'. Mari lihat secara praktikal.
Catatan : Kod HTML adalah sama dengan Perbezaan 2 (Objek Nod Berbilang).
Kaedah 'tambah()'.
Lihat baris kod yang diberikan:
< skrip >
konsol. log ( maindiv. tambahkan ( div4 ) ) ;
skrip >Di sini, kaedah 'console.log()' digunakan untuk menyemak nilai yang dikembalikan bagi kaedah 'append()' sambil menambahkan objek Nod yang ditentukan.
Pengeluaran
Tekan 'F12' untuk membuka konsol web:
Seperti yang dilihat, nilai dikembalikan kaedah 'append()' ialah ' tidak ditentukan ”.
Kaedah appendChild().
Sekarang, pertimbangkan kod berikut menggunakan kaedah 'appendChild()':
< skrip >
konsol. log ( maindiv. appendChild ( div4 ) ) ;
skrip >Tentukan kaedah 'appendChild()' dengan kaedah 'console.log()' sama seperti kaedah 'append()'.
Pengeluaran
Di sini, output mengembalikan HTML elemen yang dilampirkan termasuk sifat penggayaan sebaliknya.
Kesimpulan
jQuery ' tambahkan ()' dan JavaScript ' appendChild ()' kaedah adalah berbeza berdasarkan ' sintaks', 'penggunaan', dan 'berbilang objek Nod ”. Selain itu, 'mereka nilai yang dikembalikan ” juga berbeza antara satu sama lain. Kedua-dua kaedah ini berguna dan penggunaannya bergantung pada pilihan pengguna. Panduan ini menyenaraikan perbezaan antara jQuery “ tambahkan ()' dan JavaScript ' appendChild ()” kaedah secara praktikal.