A JavaScript egy sokoldalú programozási nyelv, amely lehetővé teszi a HTML-hez (Hyper Text Markup Language) hasonló elemek létrehozását és kezelését. A funkció végrehajtásához az „append()” és az „appendChild()” metódusokat követi. Ahogy a nevük is sugallja, mindkét módszer hozzáfűzi a HTML elemeket, például a String vagy Node objektumokat. Funkcióiktól és egyéb tényezőktől függően azonban különböznek egymástól.
Ez az útmutató kiemeli a jQuery közötti fő különbségeket. mellékel ()' és JavaScript ' appendChild ()” módszereket.
Mielőtt rátérnénk a jQuery közötti különbségekre ' mellékel ()' és JavaScript ' appendChild ()” módszereket, először vessen egy pillantást ezeknek a módszereknek az alapjaira.
Mi az a jQuery append() metódus?
A jQuery' mellékel ()” metódus beszúrja a kívánt „Node” és „String” objektumokat a végére a szülőelem utolsó gyermekeként.
Szintaxis
$ ( választó ) . mellékel ( tartalom , funkció ( index , html ) )A fenti szintaxisban:
- tartalom : HTML-elemekre, DOM-elemekre vagy jQuery-objektumokra utal.
- funkció : Ez egy további paraméter, amely a felhasználó által definiált JavaScript függvényt határozza meg, amely az „index (elempozíció)” és a „html (a kiválasztott elemek html-je)” paraméterekkel rendelkezik.
Mi az a JavaScript appendChild() metódus?
Az „appendChild()” metódus csak a „Node” objektumot adja hozzá a szülőelem utolsó gyermeke után. Először létrehozza a kívánt Node objektumot a „createElement()” metódussal, majd hozzáfűzi.
Szintaxis
elem. appendChild ( csomópont )Ez a szintaxis csak egy paramétert igényel, azaz: ' csomópont ”.
Ahogy a nevük is sugallja, a fent tárgyalt módszerek különböznek egymástól. Ez a rész bemutat néhány olyan tényezőt, amelyekben ezek különböznek. Vessünk egy pillantást rájuk.
A jQuery append() és a JavaScript appendChild() metódus közötti különbségek
| Feltételek | jQuery append() | JavaScript appendChild() |
|---|---|---|
| Használat | Használható a szülőelem hozzáfűzésére új '' hozzáadásával Csomópont ” és „ Húr ” tárgyakat egyszerre. | Csak a szülőelem hozzáfűzésére használható az új ' Csomópont ' a ' CreateElement ()” módszerrel. |
| Több csomópont objektum | A ' mellékel ()” metódus több csomópont objektumot is hozzáadhat a társított szülőeleméhez egyidejűleg a következő formátumban. Formátum : 'div.append(firschild, secondchild, 'Linuxhint');' |
A ' appendChild ()” metódus jól működik több csomópont objektummal, de egyszerre csak az első gyermeket fűzi hozzá, majd a következőt. Formátum : 'div.appendChild(elsőgyermek, második gyermek, 'Linuxhint');' |
| Visszatérési érték | A ' mellékel ()” metódus nem adja vissza a hozzáfűzött Node objektumot, mivel „undefined” visszaadott értéket mutat, pl. Formátum : console.log(appendChildValue) // undefined |
Másrészt a „ appendChild ()” metódus a hozzáfűzött Node objektumot tartalmazó értéket ad vissza. Formátum : console.log(appendChildValue) //
|
Most folytassa a felsorolt főbb különbségek gyakorlati megvalósításával.
1. különbség: A jQuery append() és JavaScript appendChild() metódusok alkalmazása
Az első különbség szerint a „ mellékel ()” metódus hozzáfűzi a csomópontot és a karakterláncot is, míg az „appendChild()” metódus csak a csomópont objektumokat fűzi hozzá.
HTML kód
Először nézze meg a megadott HTML-kódot:
< test >< h2 > jQuery 'append()' metódus < / h2 > //Az append() < h2 > jQuery 'appendChild()' metódus < / h2 > //For appendChild()
< gomb id = 'btn1' kattintásra = 'myFunc1()' > DOM karakterlánc hozzáfűzése < / gomb >
< gomb id = 'btn2' kattintásra = 'myFunc2()' > DOM csomópont hozzáfűzése < / gomb >
< p id = 'for' > Ez egy bekezdés. < / p >
< ol id = 'lista' >
< hogy > JavaScript oktatóanyag 1 < / hogy >
< hogy > JavaScript oktatóanyag 2 < / hogy >
< hogy > JavaScript oktatóanyag 3 < / hogy >
< / ol >
< / test >
A fenti kódsorokban:
- A „
” címke határozza meg a 2. szint alcímét.
- A „
- A „
” címke egy üres bekezdést hoz létre a hozzárendelt „para” azonosítóval, hogy megjelenítse a hozzáfűzött karakterlánc értékét.
- Az „
- ” címke egy rendezett listát ad hozzá „lista” azonosítóval, a felsorolt elemeket pedig a „
- ” címkék segítségével.
jegyzet : Kövesse a fent leírt HTML-kódot az „append()” és az „appendChild()” metódusok első különbségében.
„append()” jQuery Code módszer
Először is, az „append()” metódus jQuery kódjának áttekintése:
< fej >< script src = 'https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js' > forgatókönyv >
< forgatókönyv >
$ ( dokumentum ) . kész ( funkció ( ) {
$ ( '#btn1' ) . kattintson ( funkció ( ) {
$ ( 'p' ) . mellékel ( ' Hozzáfűzött karakterlánc .' ) ;
} ) ;
$ ( '#btn2' ) . kattintson ( funkció ( ) {
$ ( 'ol' ) . mellékel ( '
} ) ;
} ) ;
forgatókönyv >
fej >
A fenti kódsorokban:
- Először adja meg a jQuery ' CDN 'útvonal a hivatalos webhelyéről' https://jquery.com/ ' segítségével a ' src ' tulajdonság.
- Ezután adjon hozzá egy kis szkriptszakaszt, amely először használja a „ kész ()” metódussal hívja elő a megadott „ funkció ()” a HTML-dokumentum betöltésekor.
- Ezt követően a „ kattintson ()' metódus végrehajtja azt a funkciót, amely ahhoz a gombhoz van kapcsolva, amelynek azonosítója ' btn1 ” gombra kattintva.
- A függvénydefinícióban a „ mellékel ()” metódussal a megcélzott bekezdéselemet hozzáfűzzük a megadott karakterlánchoz.
- Ugyanezt a folyamatot hajtják végre a hozzáadott ' rendezett lista ” azaz Node objektum, amellyel hozzáfűzhetjük az adott elemhez.
Kimenet
Itt megerősítjük, hogy mind a „String” és a „Node” objektumok hozzáfűzése az „append()” metódus segítségével történik.
„appendChild()” módszer JavaScript kód
Most nézd meg gyakorlatilag a JavaScript „appendChild()” metódust:
< forgatókönyv >funkció myFunc1 ( ) {
számára. appendChild ( '
Hozzáfűzött karakterlánc
' ) //DOM karakterlánc hozzáfűzése} funkció myFunc2 ( ) {
const elem = dokumentum. CreateElement ( 'hogy' ) ;
const csomópont = dokumentum. CreateTextNode ( 'Hozzáfűzött elem' ) ;
elem. appendChild ( csomópont ) ; //DOM csomópont hozzáfűzése
const elem = dokumentum. getElementById ( 'lista' ) ;
elem. appendChild ( elem ) ;
}
forgatókönyv >
A fenti kódrészletben:
- Határozzon meg egy függvénynevet ' myFunc1 ()”, amely az „appendChild()” metódussal hozzáfűzi a hozzáadott bekezdést az adott karakterlánchoz.
- Ezután a „ myFunc2 ()” függvény, a „createElement()” metódus létrehoz egy új listaelemet, majd a „createTextNode()” metódussal szöveget ad hozzá.
- Ezt követően az „appendChild()” metódus segítségével fűzze hozzá a létrehozott listacsomópontot a szövegével.
- Végül az „appendChild()” metódus segítségével fűzze hozzá az újonnan létrehozott listacsomópontot az elért rendezett listához, amelynek azonosítója „lista”.
Kimenet
Amint látható, csak a „Csomópont” objektum fűződik a gombkattintáshoz, a „String” nem.
Hiba
Nyomja meg az „F12” gombot a webkonzol megnyitásához, és ellenőrizze a problémát:
Amint látható, a konzol hibát jelez, amikor a String objektumot az „appendChild()” metódussal hozzáfűzi. Ezért megerősítést nyert, hogy az „appendChild()” metódus nem fűz hozzá String objektumot.
2. különbség: A jQuery append() és JavaScript appendChild() metódusok alkalmazása több csomópont objektumra
Az „append()” és az „appendChild()” metódusok közötti második különbség úgy elemezhető, hogy ezeket a metódusokat több csomópont objektumon hajtjuk végre. A gyakorlati megvalósításának megtekintéséhez kövesse a megadott kódokat.
HTML kód
Menjünk végig a HTML kódon:
< div id = 'fő-div' >< div stílus = 'display:flex; justify-content:center; align-items:center; szélesség:50px; magasság:50px; háttér:narancsos; margó:10px; text-align:center;' > Egy < / div >
< div stílus = 'display:flex; justify-content:center; align-items:center; szélesség:50px; magasság:50px; háttér:narancsos; margó:10px; text-align:center;' > Kettő < / div >
< div stílus = 'display:flex; justify-content:center; align-items:center; szélesség:50px; magasság:50px; háttér:narancsos; margó:10px; text-align:center;' > Három < / div >
< / div >
Itt a fenti kódsorok tartalmaznak egy fő „
jegyzet : A fent leírt HTML kódot követi az „append()” és az „appendChild()” metódusok második különbsége.
append() metódus
Most folytassa a következő szkripttel:
< forgatókönyv >const maindiv = dokumentum. getElementById ( 'fő-div' ) ;
const div4 = dokumentum. CreateElement ( 'div' ) ;
div4. innerHTML = 'Négy' ;
div4. stílus . háttérszín = 'rózsaszín' ;
div4. osztálylista . add hozzá ( 'div' ) ; const div5 = dokumentum. CreateElement ( 'div' ) ;
div5. innerHTML = 'Öt' ;
div5. stílus . háttérszín = 'rózsaszín' ;
div5. osztálylista . add hozzá ( 'div' ) ;
maindiv. mellékel ( div4 , div5 ) ;
forgatókönyv >
A fenti kódrészletben:
- A „maindiv” változó hozzáfér a hozzáadott „div”-hez a „main-div” azonosítójával, a „getElementById()” metódus segítségével.
- Ezután a „createElement()” metódus létrehoz egy új „div” csomópontobjektumot, hozzáadja a megadott szöveget az „innerHTML” tulajdonság használatával, és a háttérszínt a „style.backgroundcolor” tulajdonságon keresztül alkalmazza.
- Ezt követően az „add()” metódus hozzáadja a megadott CSS osztály-tulajdonságokat a „classList” tulajdonság segítségével.
- Ugyanezt az eljárást kell követni a következő újonnan létrehozott „” elemnél.
- Végül mindkét újonnan létrehozott Node objektumot egyidejűleg hozzáfűzzük az “append()” metódus segítségével.
Kimenet
Itt az újonnan létrehozott több csomópont objektum ennek megfelelően ugyanahhoz a szülőelemhez fűződik.
„appendChild()” metódus
Ezután folytassa az „appendChild()” metódussal:
< forgatókönyv >
maindiv. appendChild ( div4 ) ;
maindiv. appendChild ( div5 ) ;
forgatókönyv >Mint látható, az „appendChild()” metódus több csomópont objektumot ad hozzá egyenként ugyanahhoz a szülőelemhez.
Kimenet
A kimenet megegyezik az „append()” metódussal, de különbözik a csomópont objektumok megadásakor.
3. különbség: Az alkalmazott jQuery append() és JavaScript appendChild() metódusok visszatérési értéke
Az utolsó különbség az „append()” és az „appendChild()” metódusok „visszaadott értéke”. Lássuk a gyakorlatban.
jegyzet : A HTML kód megegyezik a 2. különbséggel (több csomópont objektum).
„apend()” módszer
Nézd meg a megadott kódsorokat:
< forgatókönyv >
konzol. log ( maindiv. mellékel ( div4 ) ) ;
forgatókönyv >Itt a „console.log()” metódus kerül alkalmazásra az „append()” metódus visszaadott értékének ellenőrzésére a megadott csomópont objektum hozzáfűzése közben.
Kimenet
Nyomja meg az „F12” gombot a webkonzol megnyitásához:
Mint látható, az „append()” metódus visszaadott értéke „ határozatlan ”.
appendChild() metódus
Most fontolja meg a következő kódot az „appendChild()” metódus használatával:
< forgatókönyv >
konzol. log ( maindiv. appendChild ( div4 ) ) ;
forgatókönyv >Adja meg az „appendChild()” metódust a „console.log()” metódussal, amely megegyezik az „append()” metódussal.
Kimenet
Itt a kimenet a hozzáfűzött HTML elemet adja vissza, beleértve a stílustulajdonságokat is.
Következtetés
A jQuery' mellékel ()” és a JavaScript „ appendChild ()” módszerek különböznek a „ szintaxis”, „használat” és „több csomópont objektum”. ”. Ráadásul az ő „ visszaadott értékeket ” is különböznek egymástól. Mindkét módszer hasznos, és használatuk a felhasználó választásától függ. Ez az útmutató felsorolja a különbséget a jQuery között mellékel ()” és a JavaScript „ appendChild ()” módszerrel gyakorlatilag.