JavaScript je svestran programski jezik koji omogućuje stvaranje i rukovanje elementima isto kao i HTML (Hyper Text Markup Language). Za izvođenje ove funkcije slijedi metode 'append()' i 'appendChild()'. Kao što im ime sugerira, obje metode dodaju HTML elemente poput String ili Node objekata. Međutim, međusobno se razlikuju ovisno o svojim funkcijama i drugim čimbenicima.
Ovaj vodič naglašava ključne razlike između jQuery ' dodati ()' i JavaScript ' dodatiDijete ()” metode.
Prije nego što prijeđemo na razlike između jQuery ' dodati ()' i JavaScript ' dodatiDijete ()”, prvo pogledajte osnove tih metoda.
Što je jQuery append() metoda?
jQuery ' dodati ()” metoda umeće željene objekte “Node” i “String” na kraju kao posljednje dijete nadređenog elementa.
Sintaksa
$ ( selektor ) . dodati ( sadržaj , funkcija ( indeks , html ) )U gornjoj sintaksi:
- sadržaj : Odnosi se na HTML elemente, DOM elemente ili jQuery objekte.
- funkcija : To je dodatni parametar koji specificira korisnički definiranu JavaScript funkciju koja ima parametre 'indeks (pozicija elementa)' i 'html (html odabranih elemenata)'.
Što je JavaScript appendChild() metoda?
Metoda “appendChild()” samo dodaje objekt “Node” nakon posljednjeg djeteta nadređenog elementa. Najprije stvara željeni objekt Node pomoću metode “createElement()”, a zatim ga dodaje.
Sintaksa
element. dodatiDijete ( čvor )Ova sintaksa zahtijeva samo jedan parametar, tj. čvor ”.
Kao što njihova imena sugeriraju, gore spomenute metode razlikuju se jedna od druge. Ovaj odjeljak utvrđuje neke čimbenike po kojima se razlikuju. Pogledajmo ih.
Razlike između jQuery append() i JavaScript appendChild() metode
| Pojmovi | jQuery dodavanje() | JavaScript appendChild() |
|---|---|---|
| Korištenje | Može se koristiti za dodavanje nadređenog elementa dodavanjem novog ' Čvor ' i ' Niz ” objekti u isto vrijeme. | Može se koristiti samo za dodavanje nadređenog elementa novim ' Čvor ' stvoren pomoću ' createElement ()” metoda. |
| Objekti s više čvorova | ' dodati ()” metoda može dodati više objekata Node u pridruženi nadređeni element u isto vrijeme u sljedećem formatu. Format : 'div.append(firstchild, secondchild, 'Linuxhint');' |
' dodatiDijete ()” metoda radi dobro s višestrukim objektima čvora, ali dodaje samo prvo dijete odjednom, a zatim sljedeće. Format : 'div.appendChild(firstchild, secondchild, 'Linuxhint');' |
| Povratna vrijednost | ' dodati ()” metoda ne vraća pridodani objekt Node jer prikazuje “nedefiniranu” vraćenu vrijednost, tj. Format : console.log(appendChildValue) // nedefinirano |
S druge strane, „ dodatiDijete ()” metoda vraća vrijednost koja sadrži pridodani objekt Node. Format : console.log(appendChildValue) //
|
Sada prijeđite na praktičnu primjenu navedenih ključnih razlika.
Razlika 1: Primjena jQuery append() i JavaScript appendChild() metoda
Prema prvoj razlici, „ dodati ()” metoda dodaje i čvor i niz dok metoda “appendChild()” dodaje samo objekte čvora.
HTML kôd
Prvo pogledajte navedeni HTML kod:
< tijelo >< h2 > jQuery 'append()' metoda < / h2 > //Za dodavanje() < h2 > jQuery metoda 'appendChild()'. < / h2 > //Za appendChild()
< dugme iskaznica = 'btn1' na klik = 'myFunc1()' > Dodavanje DOM niza < / dugme >
< dugme iskaznica = 'btn2' na klik = 'myFunc2()' > Dodavanje DOM čvora < / dugme >
< str iskaznica = 'za' > Ovo je paragraf. < / str >
< ol iskaznica = 'popis' >
< da > Vodič za JavaScript 1 < / da >
< da > Vodič za JavaScript 2 < / da >
< da > Vodič za JavaScript 3 < / da >
< / ol >
< / tijelo >
U gornjim linijama koda:
- Oznaka “
” definira podnaslov razine 2.
- Oznake “
- Oznaka “
” stvara prazan odlomak s dodijeljenim ID-om “para” za prikaz pridodane vrijednosti niza.
- Oznaka “
- ” dodaje uređeni popis s ID-om “list” i navedene stavke uz pomoć oznaka “
- ”.
Bilješka : Slijedite gore napisani HTML kod u prvoj razlici metoda “append()” i “appendChild()”.
“append()” Metoda jQuery kod
Prvo, pregled jQuery koda metode “append()”:
< glava >< skripta src = 'https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js' > skripta >
< skripta >
$ ( dokument ) . spreman ( funkcija ( ) {
$ ( '#btn1' ) . klik ( funkcija ( ) {
$ ( 'p' ) . dodati ( ' Dodani niz .' ) ;
} ) ;
$ ( '#btn2' ) . klik ( funkcija ( ) {
$ ( 'ol' ) . dodati ( '
} ) ;
} ) ;
skripta >
glava >
U gornjim linijama koda:
- Prvo navedite jQuery ' CDN ”put sa svoje službene web stranice” https://jquery.com/ ' uz pomoć ' src ” atribut.
- Zatim dodajte mali odjeljak skripte koji prvo koristi ' spreman ()' metoda za pozivanje navedenog ' funkcija ()” kada se HTML dokument učita.
- Nakon toga, ' klik ()' metoda izvršava funkciju koja je povezana s gumbom čiji je ID ' btn1 ” nakon klika na gumb.
- U definiciji funkcije, ' dodati ()” koristi se za dodavanje ciljanog elementa odlomka s navedenim nizom.
- Isti postupak provodi se za dodani ' uređen popis ” tj. objekt Node da ga dodate danoj stavci.
Izlaz
Ovdje je potvrđeno da su objekti “String” i “Node” dodani uz pomoć metode “append()”.
JavaScript kod metode “appendChild()”.
Sada praktično pogledajte JavaScript metodu “appendChild()”:
< skripta >funkcija myFunc1 ( ) {
za. dodatiDijete ( '
Dodani niz
' ) //Dodaj DOM niz} funkcija myFunc2 ( ) {
konst element = dokument. createElement ( 'da' ) ;
konst čvor = dokument. createTextNode ( 'Dodana stavka' ) ;
element. dodatiDijete ( čvor ) ; //Dodaj DOM čvor
konst element = dokument. getElementById ( 'popis' ) ;
element. dodatiDijete ( element ) ;
}
skripta >
U gornjem isječku koda:
- Definirajte naziv funkcije “ myFunc1 ()” koji koristi metodu “appendChild()” za dodavanje dodanog odlomka s danim nizom.
- Zatim, u ' myFunc2 ()”, metoda “createElement()” stvara novi element popisa i zatim mu dodaje neki tekst pomoću metode “createTextNode()”.
- Nakon toga, dodajte kreirani čvor popisa s njegovim tekstom pomoću metode 'appendChild()'.
- Na kraju, dodajte novostvoreni čvor popisa na uređeni popis kojem se pristupa, čiji je ID 'list' uz pomoć metode 'appendChild()'.
Izlaz
Kao što se vidi, samo objekt 'Node' dodaje se nakon klika na gumb, a ne 'String'.
Greška
Pritisnite “F12” da otvorite web konzolu i provjerite problem:
Kao što se vidi, konzola pokazuje pogrešku pri dodavanju objekta String pomoću metode 'appendChild()'. Stoga je potvrđeno da metoda 'appendChild()' ne dodaje String objekt.
Razlika 2: Primjena metoda jQuery append() i JavaScript appendChild() na više objekata čvora
Druga razlika između metoda 'append()' i 'appendChild()' može se analizirati izvođenjem ovih metoda na više objekata čvora. Da biste vidjeli njegovu praktičnu primjenu, slijedite dane kodove.
HTML kôd
Prođimo kroz HTML kod:
< div iskaznica = 'glavni-div' >< div stil = 'display:flex; justify-content:center; align-items:center; width:50px; height:50px; background:orangered; margin:10px; text-align:center;' > Jedan < / div >
< div stil = 'display:flex; justify-content:center; align-items:center; width:50px; height:50px; background:orangered; margin:10px; text-align:center;' > Dva < / div >
< div stil = 'display:flex; justify-content:center; align-items:center; width:50px; height:50px; background:orangered; margin:10px; text-align:center;' > Tri < / div >
< / div >
Ovdje gornji reci koda sadrže glavni element “
Bilješka : Gore napisani HTML kod slijedi u drugoj razlici metoda “append()” i “appendChild()”.
add() Metoda
Sada nastavite sa sljedećom skriptom:
< skripta >konst glavni div = dokument. getElementById ( 'glavni-div' ) ;
konst div4 = dokument. createElement ( 'div' ) ;
div4. unutarnjiHTML = 'četiri' ;
div4. stil . boja pozadine = 'ružičasta' ;
div4. classList . dodati ( 'div' ) ; konst div5 = dokument. createElement ( 'div' ) ;
div5. unutarnjiHTML = 'Pet' ;
div5. stil . boja pozadine = 'ružičasta' ;
div5. classList . dodati ( 'div' ) ;
glavni div. dodati ( div4 , div5 ) ;
skripta >
U gornjem isječku koda:
- Varijabla “maindiv” pristupa dodanom “div” koristeći svoj ID “main-div” uz pomoć metode “getElementById()”.
- Zatim, metoda “createElement()” stvara novi “div” Node objekt, dodaje navedeni tekst pomoću svojstva “innerHTML” i primjenjuje boju pozadine putem svojstva “style.backgroundcolor”.
- Nakon toga, metoda “add()” dodaje navedena CSS svojstva klase pomoću svojstva “classList”.
- Isti postupak slijedi za sljedeći novokreirani “” element.
- Na kraju, oba novostvorena objekta čvora dodaju se u isto vrijeme uz pomoć metode 'append()'.
Izlaz
Ovdje se novostvoreni višestruki objekti čvora dodaju istom nadređenom elementu u skladu s tim.
Metoda “appendChild()”.
Zatim nastavite s metodom 'appendChild()':
< skripta >
glavni div. dodatiDijete ( div4 ) ;
glavni div. dodatiDijete ( div5 ) ;
skripta >Kao što se vidi, metoda “appendChild()” dodaje više objekata Node jedan po jedan istom nadređenom elementu.
Izlaz
Izlaz je isti kao metoda 'append()', ali se razlikuje u specificiranju objekata Node.
Razlika 3: Povratna vrijednost primijenjenih metoda jQuery append() i JavaScript appendChild()
Posljednja razlika je 'vraćena vrijednost' metoda 'append()' i 'appendChild()'. Pogledajmo to praktično.
Bilješka : HTML kod je isti kao kod Razlike 2 (Objekti s više čvorova).
Metoda “append()”.
Pogledajte date retke koda:
< skripta >
konzola. log ( glavni div. dodati ( div4 ) ) ;
skripta >Ovdje se primjenjuje metoda “console.log()” za provjeru vraćene vrijednosti metode “append()” tijekom dodavanja navedenog objekta Node.
Izlaz
Pritisnite “F12” za otvaranje web konzole:
Kao što se vidi, vraćena vrijednost metode 'append()' je ' nedefiniran ”.
appendChild() metoda
Sada razmotrite sljedeći kod koji koristi metodu 'appendChild()':
< skripta >
konzola. log ( glavni div. dodatiDijete ( div4 ) ) ;
skripta >Navedite metodu “appendChild()” s metodom “console.log()” koja je ista kao i metoda “append()”.
Izlaz
Ovdje izlaz vraća dodani HTML element uključujući umjesto toga svojstva stila.
Zaključak
jQuery ' dodati ()' i JavaScript ' dodatiDijete ()” metode se razlikuju na temelju svojih “ sintakse”, “upotreba” i “višestruki čvorovi objekti ”. Štoviše, njihov “ vraćene vrijednosti ” također se međusobno razlikuju. Obje su metode korisne i njihova uporaba ovisi o izboru korisnika. Ovaj vodič navodi razliku između jQuery ' dodati ()' i JavaScript ' dodatiDijete ()” metoda praktički.