JavaScript er et alsidigt programmeringssprog, der tillader oprettelse og manipulation af elementerne på samme måde som HTML (Hyper Text Markup Language). Det følger 'append()' og 'appendChild()'-metoderne for at udføre denne funktionalitet. Som deres navn antyder, tilføjer begge metoder HTML-elementer som String- eller Node-objekter. De adskiller sig dog fra hinanden afhængigt af deres funktionaliteter og andre faktorer.
Denne vejledning understreger de vigtigste forskelle mellem jQuery ' Tilføj ()' og JavaScript ' vedhæfteBarn ()' metoder.
Før du går videre til forskellene mellem jQuery ' Tilføj ()' og JavaScript ' vedhæfteBarn ()”-metoder, skal du først se på det grundlæggende i disse metoder.
Hvad er jQuery append()-metoden?
jQuery ' Tilføj ()'-metoden indsætter de ønskede 'Node'- og 'String'-objekter i slutningen som det sidste underordnede element i det overordnede element.
Syntaks
$ ( vælger ) . Tilføj ( indhold , fungere ( indeks , html ) )I ovenstående syntaks:
- indhold : Det refererer til HTML-elementer, DOM-elementer eller jQuery-objekter.
- fungere : Det er en ekstra parameter, der specificerer den brugerdefinerede JavaScript-funktion med parametrene 'indeks (elementposition)' og 'html (html af udvalgte elementer)'.
Hvad er JavaScript appendChild()-metoden?
Metoden 'appendChild()' tilføjer kun 'Node'-objektet efter det sidste underordnede element i det overordnede element. Det opretter først det ønskede Node-objekt ved hjælp af 'createElement()'-metoden og tilføjer det derefter.
Syntaks
element. vedhæfteBarn ( node )Denne syntaks kræver kun én parameter, dvs. node ”.
Som deres navne antyder, er de ovenfor diskuterede metoder forskellige fra hinanden. Dette afsnit finder ud af nogle faktorer, hvorpå de er forskellige. Lad os se på dem.
Forskelle mellem metoden jQuery append() og JavaScript appendChild().
| Betingelser | jQuery tilføje() | JavaScript appendChild() |
|---|---|---|
| Brug | Det kan bruges til at tilføje det overordnede element ved at tilføje nyt ' Node ' og ' Snor ” objekter på samme tid. | Det kan kun bruges til at tilføje det overordnede element ved den nye ' Node ' oprettet ved hjælp af ' skabeElement ()” metode. |
| Flere nodeobjekter | Det ' Tilføj ()”-metoden kan tilføje flere nodeobjekter i dets tilknyttede overordnede element på samme tid i følgende format. Format : 'div.append(firstchild, secondchild, 'Linuxhint');' |
Det ' vedhæfteBarn ()'-metoden fungerer fint med flere node-objekter, men den tilføjer kun det første barn ad gangen og derefter det næste. Format : 'div.appendChild(førstebarn, andetbarn, 'Linuxhint');' |
| Returværdi | Det ' Tilføj ()'-metoden returnerer ikke det vedhæftede Node-objekt, da den viser en 'udefineret' returneret værdi, dvs. Format : console.log(appendChildValue) // udefineret |
På den anden side er ' vedhæfteBarn ()'-metoden returnerer en værdi, der indeholder det tilføjede Node-objekt. Format : console.log(appendChildValue) //
|
Gå nu videre til den praktiske implementering af de anførte nøgleforskelle.
Forskel 1: Anvendelse af metoderne jQuery append() og JavaScript appendChild().
Ifølge den første forskel er ' Tilføj ()'-metoden tilføjer både Node og String, mens 'appendChild()'-metoden kun tilføjer Node-objekter.
HTML kode
Først skal du tage et kig på den angivne HTML-kode:
< legeme >< h2 > jQuery 'append()' metode < / h2 > //For at tilføje() < h2 > jQuery 'appendChild()' metode < / h2 > //For appendChild()
< knap id = 'btn1' onclick = 'myFunc1()' > Tilføj DOM-streng < / knap >
< knap id = 'btn2' onclick = 'myFunc2()' > Tilføj DOM Node < / knap >
< s id = 'til' > Dette er et afsnit. < / s >
< ol id = 'liste' >
< at > JavaScript-vejledning 1 < / at >
< at > JavaScript-vejledning 2 < / at >
< at > JavaScript-vejledning 3 < / at >
< / ol >
< / legeme >
I ovenstående kodelinjer:
- Tagget '
' definerer underoverskriften på niveau 2.
- '
- Tagget '
' opretter et tomt afsnit med et tildelt id 'para' for at vise den tilføjede strengværdi.
- '
- '-tagget tilføjer en ordnet liste med et id 'list', og de listede elementer ved hjælp af '
- '-tags.
Bemærk : Følg den ovenfor skrevne HTML-kode i den første forskel mellem metoderne 'append()' og 'appendChild()'.
'append()' metode jQuery Code
For det første oversigt over 'append()'-metoden jQuery-kode:
< hoved >< script src = 'https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js' > manuskript >
< manuskript >
$ ( dokument ) . parat ( fungere ( ) {
$ ( '#btn1' ) . klik ( fungere ( ) {
$ ( 'p' ) . Tilføj ( ' Tilføjet streng .' ) ;
} ) ;
$ ( '#btn2' ) . klik ( fungere ( ) {
$ ( 'ol' ) . Tilføj ( '
} ) ;
} ) ;
manuskript >
hoved >
I ovenstående kodelinjer:
- Angiv først jQuery ' CDN 'sti fra dens officielle hjemmeside' https://jquery.com/ ' ved hjælp af ' src ' attribut.
- Tilføj derefter en lille scriptsektion, der først bruger ' parat ()' metode til at påberåbe sig den angivne ' fungere ()', når HTML-dokumentet er indlæst.
- Derefter vil ' klik ()'-metoden udfører den funktion, der er forbundet med knappen, hvis id er ' btn1 ” ved at klikke på knappen.
- I funktionsdefinitionen er ' Tilføj ()' metode bruges til at tilføje det målrettede afsnitselement med den angivne streng.
- Den samme proces udføres for den tilføjede ' bestilt liste ” dvs. Node-objekt for at tilføje det til det givne element.
Produktion
Her bekræftes det, at både 'String' og 'Node' objekterne er tilføjet ved hjælp af 'append()' metoden.
'appendChild()' metode JavaScript-kode
Se nu praktisk talt på JavaScript 'appendChild()'-metoden:
< manuskript >fungere minFunc1 ( ) {
til. vedhæfteBarn ( '
Tilføjet streng
' ) //Tilføj DOM-streng} fungere minFunc2 ( ) {
konst element = dokument. skabeElement ( 'at' ) ;
konst node = dokument. opretTextNode ( 'Tilføjet element' ) ;
element. vedhæfteBarn ( node ) ; //Tilføj DOM-node
konst element = dokument. getElementById ( 'liste' ) ;
element. vedhæfteBarn ( element ) ;
}
manuskript >
I ovenstående kodestykke:
- Definer et funktionsnavn ' minFunc1 ()', der bruger metoden 'appendChild()' til at tilføje det tilføjede afsnit med den givne streng.
- Dernæst i ' minFunc2 ()'-funktionen, opretter 'createElement()'-metoden et nyt listeelement og tilføjer derefter noget tekst til det ved hjælp af 'createTextNode()'-metoden.
- Derefter skal du tilføje den oprettede listenode med dens tekst ved hjælp af metoden 'appendChild()'.
- Til sidst skal du tilføje den nyoprettede liste Node til den tilgåede ordnede liste, hvis id er 'list' ved hjælp af 'appendChild()' metoden.
Produktion
Som det ses er det kun 'Node'-objektet, der tilføjes ved knapklik, ikke 'String'.
Fejl
Tryk på 'F12' for at åbne webkonsollen og inspicere problemet:
Som det ses, viser konsollen en fejl ved tilføjelse af String-objektet ved hjælp af 'appendChild()'-metoden. Derfor er det bekræftet, at metoden 'appendChild()' ikke tilføjer et String-objekt.
Forskel 2: Anvendelse af jQuery append()- og JavaScript-appendChild()-metoderne på flere nodeobjekter
Den anden forskel mellem metoderne 'append()' og 'appendChild()' kan analyseres ved at udføre disse metoder på flere nodeobjekter. Følg de givne koder for at se den praktiske implementering.
HTML kode
Lad os gennemgå HTML-koden:
< div id = 'hoved-div' >< div stil = 'display:flex; justify-content:center; align-items:center; width:50px; height:50px; background:orangered; margin:10px; text-align:center;' > En < / div >
< div stil = 'display:flex; justify-content:center; align-items:center; width:50px; height:50px; background:orangered; margin:10px; text-align:center;' > To < / div >
< div stil = 'display:flex; justify-content:center; align-items:center; width:50px; height:50px; background:orangered; margin:10px; text-align:center;' > Tre < / div >
< / div >
Her indeholder ovenstående kodelinjer et hoved '
Bemærk : Den ovenfor skrevne HTML-kode følges i den anden forskel mellem både 'append()'- og 'appendChild()'-metoderne.
append() Metode
Fortsæt nu med følgende script:
< manuskript >konst hoveddiv = dokument. getElementById ( 'hoved-div' ) ;
konst div4 = dokument. skabeElement ( 'div' ) ;
div4. indreHTML = 'Fire' ;
div4. stil . baggrundsfarve = 'lyserød' ;
div4. klasseliste . tilføje ( 'div' ) ; konst div5 = dokument. skabeElement ( 'div' ) ;
div5. indreHTML = 'Fem' ;
div5. stil . baggrundsfarve = 'lyserød' ;
div5. klasseliste . tilføje ( 'div' ) ;
hoveddiv. Tilføj ( div4 , div5 ) ;
manuskript >
I ovenstående kodestykke:
- Variablen 'maindiv' får adgang til den tilføjede 'div' ved hjælp af dens id 'main-div' ved hjælp af 'getElementById()'-metoden.
- Dernæst opretter metoden 'createElement()' et nyt 'div' nodeobjekt, tilføjer den angivne tekst ved hjælp af egenskaben 'innerHTML' og anvender baggrundsfarven via egenskaben 'style.backgroundcolor'.
- Derefter tilføjer 'add()'-metoden de angivne klasse CSS-egenskaber til den ved hjælp af egenskaben 'classList'.
- Den samme procedure følges for det næste nyoprettede ''-element.
- Til sidst tilføjes begge de nyoprettede Node-objekter på samme tid ved hjælp af 'append()'-metoden.
Produktion
Her føjes de nyoprettede flere nodeobjekter til det samme overordnede element i overensstemmelse hermed.
'appendChild()' metode
Fortsæt derefter med 'appendChild()'-metoden:
< manuskript >
hoveddiv. vedhæfteBarn ( div4 ) ;
hoveddiv. vedhæfteBarn ( div5 ) ;
manuskript >Som det ses tilføjer 'appendChild()'-metoden flere Node-objekter én efter én til det samme overordnede element.
Produktion
Outputtet er det samme som 'append()'-metoden, men forskelligt med hensyn til at specificere Node-objekterne.
Forskel 3: Returner værdi af de anvendte jQuery append() og JavaScript appendChild() metoder
Den sidste forskel er den 'returnerede værdi' af metoderne 'append()' og 'appendChild()'. Lad os se det praktisk talt.
Bemærk : HTML-koden er den samme som Difference 2 (flere nodeobjekter).
'tilføj()' metode
Se på de givne kodelinjer:
< manuskript >
konsol. log ( hoveddiv. Tilføj ( div4 ) ) ;
manuskript >Her anvendes 'console.log()'-metoden til at kontrollere den returnerede værdi af 'append()'-metoden, mens det angivne Node-objekt tilføjes.
Produktion
Tryk på 'F12' for at åbne webkonsollen:
Som det ses, er 'append()'-metodens returnerede værdi ' udefineret '.
appendChild() Metode
Overvej nu følgende kode ved at bruge 'appendChild()'-metoden:
< manuskript >
konsol. log ( hoveddiv. vedhæfteBarn ( div4 ) ) ;
manuskript >Angiv 'appendChild()'-metoden med 'console.log()'-metoden på samme måde som 'append()'-metoden.
Produktion
Her returnerer outputtet det tilføjede element HTML inklusive stilegenskaberne i stedet.
Konklusion
jQuery ' Tilføj ()' og JavaScript' vedhæfteBarn ()' metoder er forskellige på grundlag af deres ' syntakser', 'brug' og 'flere Node-objekter ”. Desuden deres ' returnerede værdier ” er også forskellige fra hinanden. Begge metoder er nyttige, og deres brug afhænger af brugerens valg. Denne guide listede forskellen mellem jQuery ' Tilføj ()' og JavaScript' vedhæfteBarn ()” metode praktisk talt.