JavaScript ir daudzpusīga programmēšanas valoda, kas ļauj izveidot un manipulēt ar tādiem pašiem elementiem kā HTML (hiperteksta iezīmēšanas valoda). Lai veiktu šo funkcionalitāti, tiek izmantotas metodes “append()” un “appendChild()”. Kā norāda to nosaukums, abas metodes pievieno HTML elementus, piemēram, String vai Node objektus. Tomēr tie atšķiras viens no otra atkarībā no to funkcijām un citiem faktoriem.
Šajā rokasgrāmatā ir uzsvērtas galvenās atšķirības starp jQuery ' pievienot ()' un JavaScript ' pievienotBērns ()' metodes.
Pirms pāriet uz atšķirībām starp jQuery ' pievienot ()' un JavaScript ' pievienotBērns ()” metodes, vispirms apskatiet šo metožu pamatus.
Kas ir jQuery append() metode?
JQuery' pievienot ()” metode ievieto vajadzīgos objektus “Node” un “String” beigās kā vecāku elementa pēdējo atvasināto.
Sintakse
$ ( atlasītājs ) . pievienot ( saturu , funkciju ( rādītājs , html ) )Iepriekš minētajā sintaksē:
- saturu : tas attiecas uz HTML elementiem, DOM elementiem vai jQuery objektiem.
- funkciju : Tas ir papildu parametrs, kas norāda lietotāja definētu JavaScript funkciju ar parametriem “indekss (elementa pozīcija)” un “html (atlasīto elementu html)”.
Kas ir JavaScript appendChild() metode?
Metode “appendChild()” pievieno objektu “Node” tikai pēc vecākelementa pēdējā atvasinājuma. Vispirms tas izveido vajadzīgo Node objektu, izmantojot metodi “createElement()”, un pēc tam pievieno to.
Sintakse
elements. pievienotBērns ( mezgls )Šai sintaksei ir nepieciešams tikai viens parametrs, t.i., ' mezgls ”.
Kā liecina to nosaukumi, iepriekš apspriestās metodes atšķiras viena no otras. Šajā sadaļā ir norādīti daži faktori, pēc kuriem tie atšķiras. Apskatīsim tos.
Atšķirības starp jQuery append() un JavaScript appendChild() metodi
| Noteikumi | jQuery append() | JavaScript appendChild() |
|---|---|---|
| Lietošana | To var izmantot, lai pievienotu vecākelementu, pievienojot jaunu ' Mezgls ' un ' Stīga ” objektus vienlaikus. | To var izmantot tikai, lai pievienotu vecākelementu ar jauno ' Mezgls ” izveidots, izmantojot izveidotElement ()” metodi. |
| Vairāki mezglu objekti | ' pievienot ()” metode var pievienot vairākus mezgla objektus ar to saistītajā vecākelementā vienlaikus šādā formātā. Formāts : 'div.append(pirmais bērns, otrais bērns, 'Linuxhint');' |
' pievienotBērns ()” metode lieliski darbojas ar vairākiem mezgla objektiem, taču tā vienlaikus pievieno tikai pirmo bērnu un pēc tam nākamo. Formāts : 'div.appendChild(pirmais bērns, otrais bērns, 'Linuxhint');' |
| Atdeves vērtība | ' pievienot ()” metode neatgriež pievienoto mezgla objektu, jo tā parāda “nenodefinētu” atgriezto vērtību, t.i. Formāts : console.log(appendChildValue) // undefined |
No otras puses, “ pievienotBērns ()” metode atgriež vērtību, kas satur pievienoto mezgla objektu. Formāts : konsole.log(appendChildValue) //
|
Tagad pārejiet pie uzskaitīto galveno atšķirību praktiskas īstenošanas.
1. atšķirība: jQuery append() un JavaScript appendChild() metožu izmantošana
Saskaņā ar pirmo atšķirību “ pievienot ()” metode pievieno gan mezglu, gan virkni, savukārt metode “appendChild()” pievieno tikai mezgla objektus.
HTML kods
Vispirms apskatiet norādīto HTML kodu:
< ķermeni >< h2 > jQuery 'append()' metode < / h2 > //Pievienojumam () < h2 > jQuery 'appendChild()' metode < / h2 > //Attiecībā uz appendChild()
< pogu id = 'btn1' onclick = 'myFunc1()' > Pievienojiet DOM virkni < / pogu >
< pogu id = 'btn2' onclick = 'myFunc2()' > Pievienot DOM mezglu < / pogu >
< lpp id = 'priekš' > Šī ir rindkopa. < / lpp >
< ol id = 'saraksts' >
< ka > JavaScript apmācība 1 < / ka >
< ka > JavaScript apmācība 2 < / ka >
< ka > JavaScript apmācība 3 < / ka >
< / ol >
< / ķermeni >
Iepriekš minētajās koda rindās:
- Tags “
” nosaka 2. līmeņa apakšvirsrakstu.
- Tagi “
- Tags “
” izveido tukšu rindkopu ar piešķirtu id “para”, lai parādītu pievienotās virknes vērtību.
- Tags “
- ” pievieno sakārtotu sarakstu ar ID “list” un uzskaitītos vienumus ar tagu “
- ” palīdzību.
Piezīme : izpildiet iepriekš rakstīto HTML kodu pirmajā atšķirībā no metodēm “append()” un “appendChild()”.
“pievienot()” metode jQuery kods
Pirmkārt, pārskats par metodi “pievienot()” jQuery kodu:
< galvu >< skripts src = 'https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js' > skripts >
< skripts >
$ ( dokumentu ) . gatavs ( funkciju ( ) {
$ ( '#btn1' ) . klikšķis ( funkciju ( ) {
$ ( 'p' ) . pievienot ( ' Pievienota virkne .' ) ;
} ) ;
$ ( '#btn2' ) . klikšķis ( funkciju ( ) {
$ ( 'ol' ) . pievienot ( '
} ) ;
} ) ;
skripts >
galvu >
Iepriekš minētajās koda rindās:
- Vispirms norādiet jQuery ' CDN 'ceļš no tās oficiālās vietnes' https://jquery.com/ ' ar '' palīdzību src ” atribūts.
- Pēc tam pievienojiet nelielu skripta sadaļu, kas vispirms izmanto ' gatavs ()' metode, lai izsauktu norādīto ' funkciju ()”, kad tiek ielādēts HTML dokuments.
- Pēc tam ' klikšķis ()' metode izpilda funkciju, kas ir saistīta ar pogu, kuras ID ir ' btn1 ” noklikšķinot uz pogas.
- Funkcijas definīcijā “ pievienot ()” metode tiek izmantota, lai pievienotu mērķa rindkopas elementu ar norādīto virkni.
- Tas pats process tiek veikts ar pievienoto ' pasūtītais saraksts ” t.i., mezgla objekts, lai to pievienotu dotajam vienumam.
Izvade
Šeit tiek apstiprināts, ka gan objekti “String”, gan “Node” tiek pievienoti ar “append()” metodes palīdzību.
“appendChild()” metodes JavaScript kods
Tagad praktiski apskatiet JavaScript metodi “appendChild()”:
< skripts >funkciju myFunc1 ( ) {
priekš. pievienotBērns ( '
Pievienota virkne
' ) //Pievienot DOM virkni} funkciju myFunc2 ( ) {
konst elements = dokumentu. izveidotElement ( 'tas' ) ;
konst mezgls = dokumentu. CreateTextNode ( 'Pievienots vienums' ) ;
elements. pievienotBērns ( mezgls ) ; //Pievienot DOM mezglu
konst elements = dokumentu. getElementById ( 'saraksts' ) ;
elements. pievienotBērns ( elements ) ;
}
skripts >
Iepriekš minētajā koda fragmentā:
- Definējiet funkcijas nosaukumu ' myFunc1 ()”, kas izmanto metodi “appendChild()”, lai pievienotu rindkopu ar norādīto virkni.
- Tālāk sadaļā “ myFunc2 ()”, metode “createElement()” izveido jaunu saraksta elementu un pēc tam pievieno tam tekstu, izmantojot metodi “createTextNode()”.
- Pēc tam pievienojiet izveidoto saraksta mezglu ar tā tekstu, izmantojot metodi “appendChild()”.
- Visbeidzot, pievienojiet jaunizveidoto saraksta mezglu piekļūtajam sakārtotajam sarakstam, kura ID ir “saraksts”, izmantojot metodi “appendChild()”.
Izvade
Kā redzams, pogas klikšķim tiek pievienots tikai objekts “Node”, nevis “virkne”.
Kļūda
Nospiediet “F12”, lai atvērtu tīmekļa konsoli un pārbaudītu problēmu:
Kā redzams, konsole parāda kļūdu, pievienojot String objektu, izmantojot metodi “appendChild()”. Tādējādi tiek apstiprināts, ka metode “appendChild()” nepievieno virknes objektu.
2. atšķirība: jQuery append() un JavaScript appendChild() metožu lietošana vairākiem mezglu objektiem
Otro atšķirību starp “append()” un “appendChild()” metodēm var analizēt, veicot šīs metodes vairākiem mezglu objektiem. Lai redzētu tā praktisko ieviešanu, sekojiet norādītajiem kodiem.
HTML kods
Izejam cauri HTML kodam:
< div id = 'galvenais-div' >< div stils = 'displejs: flex; justify-content:center; align-items:center; platums: 50px; augstums: 50px; fons:oranžs; margin: 10px; text-align:center;' > Viens < / div >
< div stils = 'displejs: flex; justify-content:center; align-items:center; platums: 50px; augstums: 50px; fons:oranžs; margin: 10px; text-align:center;' > Divas < / div >
< div stils = 'displejs: flex; justify-content:center; align-items:center; platums: 50px; augstums: 50px; fons:oranžs; margin: 10px; text-align:center;' > Trīs < / div >
< / div >
Šeit iepriekš minētajās koda rindās ir galvenais “
Piezīme : Iepriekš rakstītais HTML kods tiek ievērots otrajā atšķirībā no metodēm “append()” un “appendChild()”.
append() metode
Tagad turpiniet ar šādu skriptu:
< skripts >konst maindiv = dokumentu. getElementById ( 'galvenais-div' ) ;
konst div4 = dokumentu. izveidotElement ( 'div' ) ;
div4. innerHTML = 'četri' ;
div4. stils . fona krāsa = 'rozā' ;
div4. klases saraksts . pievienot ( 'div' ) ; konst div5 = dokumentu. izveidotElement ( 'div' ) ;
div5. innerHTML = 'pieci' ;
div5. stils . fona krāsa = 'rozā' ;
div5. klases saraksts . pievienot ( 'div' ) ;
maindiv. pievienot ( div4 , div5 ) ;
skripts >
Iepriekš minētajā koda fragmentā:
- Maindiv mainīgais piekļūst pievienotajam “div”, izmantojot tā ID “main-div”, izmantojot metodi “getElementById()”.
- Pēc tam metode “createElement()” izveido jaunu mezgla objektu “div”, pievieno norādīto tekstu, izmantojot rekvizītu “innerHTML”, un piemēro fona krāsu, izmantojot rekvizītu “style.backgroundcolor”.
- Pēc tam metode “add()” pievieno tai norādītos CSS klases rekvizītus, izmantojot rekvizītu “classList”.
- Tāda pati procedūra tiek veikta nākamajam jaunizveidotajam “” elementam.
- Visbeidzot, abi jaunizveidotie Node objekti tiek pievienoti vienlaikus ar “append()” metodes palīdzību.
Izvade
Šeit jaunizveidotie vairāki mezgla objekti tiek attiecīgi pievienoti vienam un tam pašam vecākelementam.
Metode “appendChild()”.
Pēc tam turpiniet ar metodi “appendChild()”:
< skripts >
maindiv. pievienotBērns ( div4 ) ;
maindiv. pievienotBērns ( div5 ) ;
skripts >Kā redzams, metode “appendChild()” pievieno vairākus mezgla objektus pa vienam vienam un tam pašam vecākelementam.
Izvade
Izvade ir tāda pati kā “append()” metodei, bet atšķiras mezgla objektu norādīšanā.
3. atšķirība: lietotās jQuery append() un JavaScript appendChild() metožu atgriešanas vērtība
Pēdējā atšķirība ir “append()” un “appendChild()” metodes “atgrieztā vērtība”. Apskatīsim to praktiski.
Piezīme : HTML kods ir tāds pats kā 2. atšķirība (vairāku mezglu objekti).
“pievienot()” metode
Apskatiet dotās koda rindas:
< skripts >
konsole. žurnāls ( maindiv. pievienot ( div4 ) ) ;
skripts >Šeit tiek izmantota metode “console.log()”, lai pārbaudītu metodes “append()” atgriezto vērtību, vienlaikus pievienojot norādīto mezgla objektu.
Izvade
Nospiediet “F12”, lai atvērtu tīmekļa konsoli:
Kā redzams, metodes “pievienot()” atgrieztā vērtība ir “ nenoteikts ”.
appendChild() metode
Tagad apsveriet šo kodu, izmantojot metodi “appendChild()”:
< skripts >
konsole. žurnāls ( maindiv. pievienotBērns ( div4 ) ) ;
skripts >Norādiet metodi “appendChild()” ar metodi “console.log()” tāpat kā metodi “append()”.
Izvade
Šeit izvade atgriež pievienoto elementu HTML, tostarp stila rekvizītus.
Secinājums
JQuery' pievienot ()' un JavaScript ' pievienotBērns ()' metodes atšķiras, pamatojoties uz to ' sintakses”, “lietojums” un “vairāki mezglu objekti ”. Turklāt viņu ' atgrieztās vērtības ” arī atšķiras viens no otra. Abas metodes ir noderīgas, un to izmantošana ir atkarīga no lietotāja izvēles. Šajā rokasgrāmatā ir norādīta atšķirība starp jQuery ' pievienot ()' un JavaScript ' pievienotBērns ()” metodi praktiski.