„JavaScript“ yra universali programavimo kalba, leidžianti kurti ir valdyti elementus taip pat, kaip ir HTML (hiperteksto žymėjimo kalba). Šiai funkcijai atlikti naudojami metodai „append()“ ir „appendChild()“. Kaip rodo jų pavadinimas, abu metodai prideda HTML elementus, pvz., String arba Node objektus. Tačiau jie skiriasi vienas nuo kito priklausomai nuo jų funkcijų ir kitų veiksnių.
Šiame vadove pabrėžiami pagrindiniai „jQuery“ skirtumai. pridėti ()“ ir „JavaScript“ pridėti Vaikas ()“ metodus.
Prieš pereinant prie skirtumų tarp „jQuery“ pridėti ()“ ir „JavaScript“ pridėti Vaikas ()“ metodus, pirmiausia pažvelkite į šių metodų pagrindus.
Kas yra jQuery append() metodas?
„jQuery“ pridėti ()“ metodas įterpia norimus objektus „Mazgas“ ir „Eilutė“ pabaigoje kaip paskutinis pirminio elemento vaikas.
Sintaksė
$ ( parinkiklis ) . pridėti ( turinys , funkcija ( indeksas , html ) )Aukščiau pateiktoje sintaksėje:
- turinys : Tai reiškia HTML elementus, DOM elementus arba jQuery objektus.
- funkcija : Tai papildomas parametras, nurodantis vartotojo apibrėžtą JavaScript funkciją, turinčią parametrus „index (elemento padėtis)“ ir „html (pasirinktų elementų html)“.
Kas yra JavaScript appendChild() metodas?
Metodas „appendChild()“ prideda objektą „Node“ tik po paskutinio pirminio elemento antrinio elemento. Pirmiausia jis sukuria norimą mazgo objektą naudodamas „createElement()“ metodą ir tada jį prideda.
Sintaksė
elementas. pridėti Vaikas ( mazgas )Šiai sintaksei reikalingas tik vienas parametras, t. y. mazgas “.
Kaip rodo jų pavadinimai, aukščiau aptarti metodai skiriasi vienas nuo kito. Šiame skyriuje aprašomi kai kurie veiksniai, kuriais jie skiriasi. Pažvelkime į juos.
Skirtumai tarp jQuery append() ir JavaScript appendChild() metodo
| Sąlygos | jQuery append() | JavaScript appendChild() |
|---|---|---|
| Naudojimas | Jis gali būti naudojamas norint pridėti pirminį elementą, pridedant naują ' Mazgas “ ir „ Styga “ objektus vienu metu. | Jis gali būti naudojamas tik norint pridėti pirminį elementą nauju ' Mazgas “ sukurta naudojant „ sukurtiElementą ()“ metodą. |
| Keli mazgų objektai | „ pridėti ()“ metodas gali įtraukti kelis mazgo objektus į susietą pirminį elementą vienu metu tokiu formatu. Formatas : 'div.append(pirmas vaikas, antrasis vaikas, 'Linuxhint');' |
„ pridėti Vaikas ()“ metodas puikiai veikia su keliais mazgo objektais, bet vienu metu prideda tik pirmąjį antrinį, o paskui kitą. Formatas : 'div.appendChild(pirmas vaikas, antras vaikas, 'Linuxhint');' |
| Grąžinimo vertė | „ pridėti ()“ metodas negrąžina pridėto Node objekto, nes rodo „neapibrėžtą“ grąžintą reikšmę, t.y. Formatas : console.log(appendChildValue) // neapibrėžta |
Kita vertus, „ pridėti Vaikas ()“ metodas grąžina reikšmę, kurioje yra pridėtas mazgo objektas. Formatas : console.log(appendChildValue) //
|
Dabar pereikite prie praktinio išvardytų pagrindinių skirtumų įgyvendinimo.
1 skirtumas: jQuery append() ir JavaScript appendChild() metodų taikymas
Pagal pirmąjį skirtumą „ pridėti ()“ metodas prideda ir mazgą, ir eilutę, o metodas „appendChild()“ prideda tik mazgo objektus.
HTML kodas
Pirmiausia pažvelkite į nurodytą HTML kodą:
< kūnas >< h2 > jQuery 'pridėti()' metodas < / h2 > //Pridėti() < h2 > jQuery 'appendChild()' metodas < / h2 > //Už appendChild()
< mygtuką id = 'btn1' paspaudus = 'myFunc1()' > Pridėti DOM eilutę < / mygtuką >
< mygtuką id = 'btn2' paspaudus = 'myFunc2()' > Pridėti DOM mazgą < / mygtuką >
< p id = 'dėl' > Tai pastraipa. < / p >
< ol id = 'sąrašas' >
< kad > „JavaScript“ pamoka 1 < / kad >
< kad > „JavaScript“ pamoka 2 < / kad >
< kad > 3 JavaScript pamoka < / kad >
< / ol >
< / kūnas >
Aukščiau pateiktose kodo eilutėse:
- Žyma „
“ apibrėžia 2 lygio paantraštę.
- Žymos „
- Žyma „
“ sukuria tuščią pastraipą su priskirtu ID „para“, kad būtų rodoma pridėta eilutės reikšmė.
- Žyma „
- “ prideda sutvarkytą sąrašą su ID „sąrašas“, o išvardyti elementai – „
- “ žymų pagalba.
Pastaba : vykdykite aukščiau parašytą HTML kodą pirmuoju metodų „append()“ ir „appendChild()“ skirtumu.
'pridėti ()' metodas jQuery kodas
Pirma, „pridėti()“ metodo jQuery kodo apžvalga:
< galva >< scenarijus src = 'https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js' > scenarijus >
< scenarijus >
$ ( dokumentas ) . pasiruošę ( funkcija ( ) {
$ ( „#btn1“ ) . spustelėkite ( funkcija ( ) {
$ ( 'p' ) . pridėti ( ' Pridėta eilutė .' ) ;
} ) ;
$ ( '#btn2' ) . spustelėkite ( funkcija ( ) {
$ ( 'ol' ) . pridėti ( „
} ) ;
} ) ;
scenarijus >
galva >
Aukščiau pateiktose kodo eilutėse:
- Pirmiausia nurodykite „jQuery“ CDN 'kelias iš oficialios svetainės' https://jquery.com/ “, naudojant “ src “ atributas.
- Tada pridėkite nedidelę scenarijaus skiltį, kuri pirmiausia naudoja „ pasiruošę ()“ metodą, kad būtų galima iškviesti nurodytą „ funkcija ()“, kai įkeliamas HTML dokumentas.
- Po to „ spustelėkite ()“ metodas vykdo funkciją, susietą su mygtuku, kurio ID yra „ btn1 “ spustelėjus mygtuką.
- Funkcijos apibrėžime „ pridėti ()“ metodas naudojamas tikslinam pastraipos elementui pridėti su nurodyta eilute.
- Tas pats procesas atliekamas su pridėtu ' užsakytas sąrašas “, ty mazgo objektas, skirtas pridėti jį prie nurodyto elemento.
Išvestis
Čia patvirtinama, kad tiek „String“, tiek „Node“ objektai pridedami naudojant „pridėti()“ metodą.
„appendChild()“ metodas „JavaScript“ kodas
Dabar pažvelkite į „JavaScript“ metodą „appendChild()“ praktiškai:
< scenarijus >funkcija myFunc1 ( ) {
dėl. pridėti Vaikas ( „
Pridėta eilutė
“ ) //Pridėti DOM eilutę} funkcija myFunc2 ( ) {
konst elementas = dokumentas. sukurtiElementą ( 'tai' ) ;
konst mazgas = dokumentas. CreateTextNode ( 'Pridėtas elementas' ) ;
elementas. pridėti Vaikas ( mazgas ) ; //Pridėti DOM mazgą
konst elementas = dokumentas. getElementById ( 'sąrašas' ) ;
elementas. pridėti Vaikas ( elementas ) ;
}
scenarijus >
Aukščiau pateiktame kodo fragmente:
- Apibrėžkite funkcijos pavadinimą ' myFunc1 ()“, kuris naudoja „appendChild()“ metodą, kad pridėtų pastraipą su nurodyta eilute.
- Toliau, „ myFunc2 ()“ funkciją, metodas „createElement()“ sukuria naują sąrašo elementą ir prideda prie jo teksto, naudodamas metodą „createTextNode()“.
- Po to sukurtą sąrašo mazgą pridėkite prie jo teksto, naudodami metodą „appendChild()“.
- Galiausiai pridėkite naujai sukurtą sąrašo mazgą prie pasiekiamo užsakyto sąrašo, kurio ID yra „sąrašas“, naudodami metodą „appendChild()“.
Išvestis
Kaip matote, spustelėjus mygtuką, pridedamas tik objektas „Mazgas“, o ne „Eilutė“.
Klaida
Paspauskite „F12“, kad atidarytumėte žiniatinklio konsolę ir patikrintumėte problemą:
Kaip matyti, konsolė rodo klaidą pridedant String objektą naudojant 'appendChild()' metodą. Taigi patvirtinama, kad „appendChild()“ metodas neprideda eilutės objekto.
2 skirtumas: jQuery append() ir JavaScript appendChild() metodų taikymas keliems mazgo objektams
Antrasis skirtumas tarp 'pridėti()' ir 'appendChild()' metodų gali būti analizuojamas atliekant šiuos metodus keliems mazgo objektams. Norėdami pamatyti jo praktinį įgyvendinimą, vadovaukitės pateiktais kodais.
HTML kodas
Peržiūrėkime HTML kodą:
< div id = 'pagrindinis padas' >< div stilius = 'display:flex; justify-content:center; align-items:center; plotis:50px; aukštis:50px; fonas:oranžinis; paraštė:10px; teksto lygiavimas:centras;' > Vienas < / div >
< div stilius = 'display:flex; justify-content:center; align-items:center; plotis:50px; aukštis:50px; fonas:oranžinis; paraštė:10px; teksto lygiavimas:centras;' > Du < / div >
< div stilius = 'display:flex; justify-content:center; align-items:center; plotis:50px; aukštis:50px; fonas:oranžinis; paraštė:10px; teksto lygiavimas:centras;' > Trys < / div >
< / div >
Čia aukščiau pateiktose kodo eilutėse yra pagrindinis „
Pastaba : Aukščiau parašytame HTML kode laikomasi antrojo skirtumo tarp „pridėti()“ ir „appendChild()“ metodų.
append() metodas
Dabar tęskite šį scenarijų:
< scenarijus >konst maindiv = dokumentas. getElementById ( 'pagrindinis padas' ) ;
konst div4 = dokumentas. sukurtiElementą ( 'div' ) ;
div4. vidinis HTML = 'keturi' ;
div4. stilius . fono spalva = 'rožinis' ;
div4. klasių sąrašas . papildyti ( 'div' ) ; konst div5 = dokumentas. sukurtiElementą ( 'div' ) ;
div5. vidinis HTML = 'penki' ;
div5. stilius . fono spalva = 'rožinis' ;
div5. klasių sąrašas . papildyti ( 'div' ) ;
maindiv. pridėti ( div4 , div5 ) ;
scenarijus >
Aukščiau pateiktame kodo fragmente:
- Kintamasis „maindiv“ pasiekia pridėtą „div“, naudodamas savo ID „main-div“, naudodamas metodą „getElementById()“.
- Tada metodas 'createElement()' sukuria naują 'div' mazgo objektą, prideda nurodytą tekstą naudodamas 'innerHTML' ypatybę ir pritaiko fono spalvą per 'style.backgroundcolor' ypatybę.
- Po to metodas „add()“ prideda nurodytas klasės CSS ypatybes naudodamas „classList“ ypatybę.
- Ta pati procedūra taikoma ir kitam naujai sukurtam „“ elementui.
- Galiausiai abu naujai sukurti mazgo objektai pridedami tuo pačiu metu, naudojant metodą „pridėti ()“.
Išvestis
Čia naujai sukurti keli mazgo objektai atitinkamai pridedami prie to paties pirminio elemento.
'pridėtiChild()' metodas
Tada tęskite metodą „appendChild()“:
< scenarijus >
maindiv. pridėti Vaikas ( div4 ) ;
maindiv. pridėti Vaikas ( div5 ) ;
scenarijus >Kaip matyti, metodas 'appendChild()' prideda kelis mazgo objektus po vieną prie to paties pirminio elemento.
Išvestis
Išvestis yra tokia pati kaip „pridėti ()“ metodo, tačiau skiriasi mazgo objektų nurodymas.
3 skirtumas: taikomų jQuery append() ir JavaScript appendChild() metodų grąžinimo vertė
Paskutinis skirtumas yra „pridėti()“ ir „pridėtiChild()“ metodų „grąžinta vertė“. Pažiūrėkime praktiškai.
Pastaba : HTML kodas yra toks pat kaip 2 skirtumas (kelių mazgų objektai).
'pridėti ()' metodas
Pažvelkite į nurodytas kodo eilutes:
< scenarijus >
konsolė. žurnalas ( maindiv. pridėti ( div4 ) ) ;
scenarijus >Čia metodas „console.log()“ taikomas norint patikrinti grąžintą metodo „append()“ reikšmę pridedant nurodytą mazgo objektą.
Išvestis
Paspauskite „F12“, kad atidarytumėte žiniatinklio konsolę:
Kaip matote, metodo „pridėti ()“ grąžinama vertė yra „ neapibrėžtas “.
appendChild() metodas
Dabar apsvarstykite šį kodą naudodami „appendChild()“ metodą:
< scenarijus >
konsolė. žurnalas ( maindiv. pridėti Vaikas ( div4 ) ) ;
scenarijus >Nurodykite metodą 'appendChild()' naudodami 'console.log()' metodą taip pat kaip ir 'pridėti()'.
Išvestis
Čia išvestis grąžina pridėtą elementą HTML, įskaitant stiliaus ypatybes.
Išvada
„jQuery“ pridėti ()“ ir „JavaScript“ pridėti Vaikas ()“ metodai skiriasi pagal jų „ sintaksės“, „naudojimas“ ir „keli mazgo objektai “. Be to, jų „ grąžintos reikšmės “ taip pat skiriasi viena nuo kitos. Abu metodai yra naudingi ir jų naudojimas priklauso nuo vartotojo pasirinkimo. Šiame vadove išvardintas skirtumas tarp „jQuery“ pridėti ()“ ir „JavaScript“ pridėti Vaikas ()“ metodą praktiškai.