JavaScript je všestranný programovací jazyk, ktorý umožňuje vytváranie a manipuláciu s prvkami rovnakými ako HTML (Hyper Text Markup Language). Na vykonanie tejto funkcie sa riadi metódami „append()“ a „appendChild()“. Ako naznačuje ich názov, obe metódy pridávajú prvky HTML, ako sú objekty String alebo Node. Líšia sa však od seba v závislosti od ich funkcií a iných faktorov.
Táto príručka zdôrazňuje kľúčové rozdiely medzi jQuery „ priložiť ()“ a JavaScript „ appendChild ()“ metódy.
Predtým, ako prejdeme k rozdielom medzi jQuery “ priložiť ()“ a JavaScript „ appendChild ()“, najprv sa pozrite na základy týchto metód.
Čo je to metóda jQuery append()?
jQuery' priložiť ()“ metóda vloží požadované objekty „Node“ a „String“ na koniec ako posledného potomka nadradeného prvku.
Syntax
$ ( selektor ) . priložiť ( obsahu , funkciu ( index , html ) )Vo vyššie uvedenej syntaxi:
- obsahu : Vzťahuje sa na prvky HTML, prvky DOM alebo objekty jQuery.
- funkciu : Ide o dodatočný parameter, ktorý špecifikuje užívateľom definovanú funkciu JavaScriptu s parametrami „index (pozícia prvku)“ a „html (html vybraných prvkov).
Čo je to metóda JavaScript appendChild()?
Metóda „appendChild()“ iba pridá objekt „Node“ za posledného potomka nadradeného prvku. Najprv vytvorí požadovaný objekt Node pomocou metódy „createElement()“ a potom ho pripojí.
Syntax
element. appendChild ( uzol )Táto syntax vyžaduje iba jeden parameter, napr. uzol “.
Ako naznačuje ich názov, vyššie diskutované metódy sa navzájom líšia. Táto časť uvádza niektoré faktory, v ktorých sa líšia. Poďme sa na ne pozrieť.
Rozdiely medzi metódami jQuery append() a JavaScript appendChild()
| Podmienky | jQuery append() | JavaScript appendChild() |
|---|---|---|
| Použitie | Môže sa použiť na pripojenie rodičovského prvku pridaním nového „ Uzol “ a „ Reťazec “ objekty súčasne. | Dá sa použiť iba na pridanie nadradeného prvku novým „ Uzol “vytvorené pomocou „ createElement ()“ metóda. |
| Viaceré uzlové objekty | ' priložiť ()” metóda môže pridať viacero objektov Node do svojho priradeného rodičovského prvku súčasne v nasledujúcom formáte. Formátovať : „div.append(prvé dieťa, druhé dieťa, ‚Linuxhint‘);“ |
' appendChild ()“ metóda funguje dobre s viacerými objektmi uzla, ale pripája naraz iba prvé dieťa a potom ďalšie. Formátovať : “div.appendChild(firstchild, secondchild, ‘Linuxhint’);” |
| Návratová hodnota | ' priložiť ()“ metóda nevracia pripojený objekt Node, pretože zobrazuje „nedefinovanú“ vrátenú hodnotu, t.j. Formátovať : console.log(appendChildValue) // nedefinované |
Na druhej strane, „ appendChild ()” metóda vracia hodnotu obsahujúcu pridaný objekt Node. Formátovať : console.log(appendChildValue) //
|
Teraz prejdite na praktickú implementáciu uvedených kľúčových rozdielov.
Rozdiel 1: Použitie metód jQuery append() a JavaScript appendChild()
Podľa prvého rozdielu „ priložiť Metóda ()“ pripojí uzol aj reťazec, zatiaľ čo metóda „appendChild()“ pripojí iba objekty uzla.
HTML kód
Najprv si pozrite uvedený HTML kód:
< telo >< h2 > Metóda jQuery 'append()'. < / h2 > //Pre append() < h2 > Metóda jQuery 'appendChild()'. < / h2 > //Pre appendChild()
< tlačidlo id = 'btn1' po kliknutí = 'myFunc1()' > Pripojte reťazec DOM < / tlačidlo >
< tlačidlo id = 'btn2' po kliknutí = 'myFunc2()' > Pripojte uzol DOM < / tlačidlo >
< p id = 'pre' > Toto je odsek. < / p >
< ol id = 'zoznam' >
< že > Výukový program JavaScript 1 < / že >
< že > Výukový program JavaScript 2 < / že >
< že > Výukový program JavaScript 3 < / že >
< / ol >
< / telo >
Vo vyššie uvedených riadkoch kódu:
- Značka „
“ definuje podnadpis úrovne 2.
- Značky „
- Značka „
“ vytvorí prázdny odsek s priradeným id „para“ na zobrazenie pripojenej hodnoty reťazca.
- Značka „
- “ pridáva usporiadaný zoznam s ID „zoznam“ a uvedené položky pomocou značiek „
- “.
Poznámka : Postupujte podľa vyššie napísaného kódu HTML v prvom rozdiele metód „append()“ a „appendChild()“.
Kód jQuery metódy „append()“.
Po prvé, prehľad kódu jQuery metódy „append()“:
< hlavu >< skript src = 'https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js' > skript >
< skript >
$ ( dokument ) . pripravený ( funkciu ( ) {
$ ( '#btn1' ) . kliknite ( funkciu ( ) {
$ ( 'p' ) . priložiť ( ' Pridaný reťazec .' ) ;
} ) ;
$ ( '#btn2' ) . kliknite ( funkciu ( ) {
$ ( 'ol' ) . priložiť ( '
} ) ;
} ) ;
skript >
hlavu >
Vo vyššie uvedených riadkoch kódu:
- Najprv zadajte jQuery “ CDN “cesta z jeho oficiálnej webovej stránky” https://jquery.com/ “ s pomocou „ src “.
- Potom pridajte malú sekciu skriptu, ktorá najskôr využíva „ pripravený ()“ metóda na vyvolanie uvedeného „ funkciu ()“, keď sa načíta HTML dokument.
- Potom sa „ kliknite ()“ metóda vykoná funkciu, ktorá je prepojená s tlačidlom, ktorého ID je „ btn1 “ po kliknutí na tlačidlo.
- V definícii funkcie je „ priložiť ()“ metóda sa používa na pripojenie cieľového prvku odseku s uvedeným reťazcom.
- Rovnaký proces sa robí pre pridané „ objednaný zoznam ” tj objekt uzla, ktorý ho pripojí k danej položke.
Výkon
Tu je potvrdené, že objekty „String“ aj „Node“ sa pripájajú pomocou metódy „append()“.
Kód JavaScript metódy „appendChild()“.
Teraz sa pozrime na metódu JavaScriptu „appendChild()“ prakticky:
< skript >funkciu myFunc1 ( ) {
pre. appendChild ( '
Pridaný reťazec
' ) //Pridať reťazec DOM} funkciu myFunc2 ( ) {
konšt element = dokument. createElement ( 'to' ) ;
konšt uzol = dokument. createTextNode ( 'Pripojená položka' ) ;
element. appendChild ( uzol ) ; //Pridať uzol DOM
konšt element = dokument. getElementById ( 'zoznam' ) ;
element. appendChild ( element ) ;
}
skript >
Vo vyššie uvedenom útržku kódu:
- Definujte názov funkcie ' myFunc1 ()“, ktorý používa metódu „appendChild()“ na pridanie pridaného odseku s daným reťazcom.
- Ďalej v časti „ myFunc2 ()“, metóda „createElement()“ vytvorí nový prvok zoznamu a potom doň pridá nejaký text pomocou metódy „createTextNode()“.
- Potom pridajte vytvorený uzol zoznamu s jeho textom pomocou metódy „appendChild()“.
- Nakoniec pomocou metódy „appendChild()“ pripojte novovytvorený uzol zoznamu k sprístupnenému usporiadanému zoznamu, ktorého id je „zoznam“.
Výkon
Ako je vidieť, po kliknutí na tlačidlo sa pripojí iba objekt „Node“, nie „String“.
Chyba
Stlačením „F12“ otvorte webovú konzolu a skontrolujte problém:
Ako vidíte, konzola zobrazuje chybu pri pridávaní objektu String pomocou metódy „appendChild()“. Preto je potvrdené, že metóda „appendChild()“ nepripája objekt String.
Rozdiel 2: Použitie metód jQuery append() a JavaScript appendChild() na objekty viacerých uzlov
Druhý rozdiel medzi metódami „append()“ a „appendChild()“ možno analyzovať vykonaním týchto metód na objektoch viacerých uzlov. Ak chcete vidieť jeho praktickú implementáciu, postupujte podľa uvedených kódov.
HTML kód
Poďme si prejsť HTML kód:
< div id = 'hlavný div' >< div štýl = 'display:flex; justify-content:center; align-items:center; width:50px; height:50px; background:orangeed; margin:10px; text-align:center;' > Jeden < / div >
< div štýl = 'display:flex; justify-content:center; align-items:center; width:50px; height:50px; background:orangeed; margin:10px; text-align:center;' > Dva < / div >
< div štýl = 'display:flex; justify-content:center; align-items:center; width:50px; height:50px; background:orangeed; margin:10px; text-align:center;' > Tri < / div >
< / div >
Tu vyššie uvedené riadky kódu obsahujú hlavný prvok „
Poznámka : Vyššie napísaný kód HTML nasleduje v druhom rozdiele metód „append()“ a „appendChild()“.
metóda append().
Teraz pokračujte nasledujúcim skriptom:
< skript >konšt maindiv = dokument. getElementById ( 'hlavný div' ) ;
konšt div4 = dokument. createElement ( 'div' ) ;
div4. innerHTML = 'štyri' ;
div4. štýl . farba pozadia = 'Ružová' ;
div4. classList . pridať ( 'div' ) ; konšt div5 = dokument. createElement ( 'div' ) ;
div5. innerHTML = 'Päť' ;
div5. štýl . farba pozadia = 'Ružová' ;
div5. classList . pridať ( 'div' ) ;
maindiv. priložiť ( div4 , div5 ) ;
skript >
Vo vyššie uvedenom útržku kódu:
- Premenná „maindiv“ pristupuje k pridanému „div“ pomocou svojho id „main-div“ pomocou metódy „getElementById()“.
- Ďalej metóda „createElement()“ vytvorí nový objekt Node „div“, pridá zadaný text pomocou vlastnosti „innerHTML“ a použije farbu pozadia prostredníctvom vlastnosti „style.backgroundcolor“.
- Potom metóda „add()“ pridá špecifikované vlastnosti CSS triedy pomocou vlastnosti „classList“.
- Rovnaký postup sa použije pre ďalší novovytvorený prvok „“.
- Nakoniec sa oba novovytvorené objekty uzla pridajú súčasne pomocou metódy „append()“.
Výkon
Tu sa novo vytvorené viaceré objekty Node zodpovedajúcim spôsobom pridajú k rovnakému rodičovskému prvku.
Metóda „appendChild()“.
Ďalej pokračujte metódou „appendChild()“:
< skript >
maindiv. appendChild ( div4 ) ;
maindiv. appendChild ( div5 ) ;
skript >Ako je vidieť, metóda „appendChild()“ pridáva viacero objektov Node jeden po druhom do rovnakého rodičovského prvku.
Výkon
Výstup je rovnaký ako pri metóde „append()“, ale líši sa v špecifikovaní objektov Node.
Rozdiel 3: Návratová hodnota použitých metód jQuery append() a JavaScript appendChild()
Posledným rozdielom je „vrátená hodnota“ metód „append()“ a „appendChild()“. Pozrime sa na to prakticky.
Poznámka : HTML kód je rovnaký ako rozdiel 2 (viacnásobné uzlové objekty).
Metóda „append()“.
Pozrite sa na dané riadky kódu:
< skript >
konzoly. log ( maindiv. priložiť ( div4 ) ) ;
skript >Tu sa používa metóda „console.log()“ na kontrolu vrátenej hodnoty metódy „append()“ pri pripájaní zadaného objektu Node.
Výkon
Stlačením „F12“ otvorte webovú konzolu:
Ako vidíte, vrátená hodnota metódy „append()“ je „ nedefinované “.
metóda appendChild().
Teraz zvážte nasledujúci kód využívajúci metódu „appendChild()“:
< skript >
konzoly. log ( maindiv. appendChild ( div4 ) ) ;
skript >Zadajte metódu „appendChild()“ s metódou „console.log()“ rovnakou ako metóda „append()“.
Výkon
Tu výstup vráti pridaný prvok HTML vrátane vlastností štýlu.
Záver
jQuery' priložiť ()“ a JavaScript „ appendChild ()“ metódy sa líšia na základe ich „ syntaxe, „použitie“ a „viacnásobné objekty uzlov“. “. Navyše ich „ vrátené hodnoty “ sa tiež navzájom líšia. Obe metódy sú užitočné a ich použitie závisí od výberu používateľa. Táto príručka uvádza rozdiel medzi jQuery „ priložiť ()“ a JavaScript „ appendChild ()“ metóda prakticky.