JavaScript on monipuolinen ohjelmointikieli, jonka avulla voidaan luoda ja käsitellä samoja elementtejä kuin HTML (Hyper Text Markup Language). Se noudattaa 'append()'- ja 'appendChild()' -menetelmiä tämän toiminnon suorittamiseksi. Kuten niiden nimestä voi päätellä, molemmat menetelmät lisäävät HTML-elementtejä, kuten merkkijono- tai solmuobjekteja. Ne eroavat kuitenkin toisistaan riippuen toiminnallisuuksistaan ja muista tekijöistään.
Tämä opas korostaa tärkeimmät erot jQueryn välillä ' liittää ()' ja JavaScript ' liitä lapsi ()' -menetelmiä.
Ennen kuin siirryt jQueryn eroihin ' liittää ()' ja JavaScript ' liitä lapsi ()' -menetelmiä, tutustu ensin näiden menetelmien perusteisiin.
Mikä on jQuery append() -menetelmä?
jQuery' liittää ()' -menetelmä lisää halutut 'Node'- ja 'String'-objektit loppuun yläelementin viimeiseksi aliksi.
Syntaksi
$ ( valitsin ) . liittää ( sisältö , toiminto ( indeksi , html ) )Yllä olevassa syntaksissa:
- sisältö : Se viittaa HTML-elementteihin, DOM-elementteihin tai jQuery-objekteihin.
- toiminto : Se on lisäparametri, joka määrittää käyttäjän määrittämän JavaScript-funktion, jolla on parametrit 'indeksi (elementin sijainti)' ja 'html (valittujen elementtien html)'.
Mikä on JavaScript appendChild() -menetelmä?
'appendChild()' -menetelmä lisää 'Node' -objektin vain pääelementin viimeisen aliasteen jälkeen. Se luo ensin halutun Node-objektin käyttämällä 'createElement()'-menetelmää ja lisää sen sitten.
Syntaksi
elementti. liitä lapsi ( solmu )Tämä syntaksi vaatii vain yhden parametrin, eli ' solmu ”.
Kuten niiden nimet viittaavat, edellä käsitellyt menetelmät eroavat toisistaan. Tässä osiossa selvitetään joitain tekijöitä, joiden suhteen ne eroavat toisistaan. Katsotaanpa niitä.
Erot jQuery append()- ja JavaScript appendChild() -menetelmien välillä
| Ehdot | jQuery append() | JavaScript appendChild() |
|---|---|---|
| Käyttö | Sitä voidaan käyttää pääelementin liittämiseen lisäämällä uusi ' Solmu ' ja ' merkkijono ”esineitä samaan aikaan. | Sitä voidaan käyttää vain pääelementin liittämiseen uudella ' Solmu ' luotu käyttämällä ' CreateElement ()' menetelmällä. |
| Useita solmuobjekteja | ' liittää ()' -menetelmä voi lisätä useita Node-objekteja siihen liittyvään pääelementtiin samanaikaisesti seuraavassa muodossa. Muoto : 'div.append(ensimmäinen lapsi, toinen lapsi, 'Linuxhint');' |
' liitä lapsi ()' -menetelmä toimii hyvin useiden solmuobjektien kanssa, mutta se lisää vain ensimmäisen lapsen kerrallaan ja sitten seuraavan. Muoto : 'div.appendChild(ensimmäinen lapsi, toinen lapsi, 'Linuxhint');' |
| Palautusarvo | ' liittää ()' -menetelmä ei palauta liitettyä Node-objektia, koska se näyttää 'määrittämättömän' palautetun arvon, ts. Muoto : console.log(appendChildValue) // määrittelemätön |
Toisaalta ' liitä lapsi ()' -menetelmä palauttaa arvon, joka sisältää liitetyn Node-objektin. Muoto : console.log(appendChildValue) //
|
Siirry nyt lueteltujen keskeisten erojen käytännön toteutukseen.
Ero 1: jQuery append()- ja JavaScript appendChild() -menetelmien käyttäminen
Ensimmäisen eron mukaan ' liittää ()' -menetelmä lisää sekä solmun että merkkijonon, kun taas 'appendChild()' -menetelmä vain lisää solmuobjekteja.
HTML-koodi
Katso ensin ilmoitettu HTML-koodi:
< kehon >< h2 > jQuery 'append()' -menetelmä < / h2 > //Liitä() < h2 > jQuery 'appendChild()' -menetelmä < / h2 > //For appendChild()
< -painiketta id = 'btn1' klikkaamalla = 'myFunc1()' > Liitä DOM-merkkijono < / -painiketta >
< -painiketta id = 'btn2' klikkaamalla = 'myFunc2()' > Liitä DOM-solmu < / -painiketta >
< s id = 'for' > Tämä on kappale. < / s >
< ol id = 'lista' >
< että > JavaScript opetusohjelma 1 < / että >
< että > JavaScript opetusohjelma 2 < / että >
< että > JavaScript opetusohjelma 3 < / että >
< / ol >
< / kehon >
Yllä olevilla koodiriveillä:
- Tunniste '
' määrittää tason 2 alaotsikon.
- '
- Tunniste '
' luo tyhjän kappaleen, johon on määritetty id 'para', joka näyttää liitetyn merkkijonon arvon.
- Tunniste “
- ” lisää järjestetyn listan, jonka tunnus on “list”, ja luetellut kohteet “
- ”-tunnisteiden avulla.
Huomautus : Noudata yllä kirjoitettua HTML-koodia 'append()'- ja 'appendChild()'-menetelmien ensimmäisessä erossa.
'append()' -menetelmä jQuery Code
Ensinnäkin, yleiskatsaus 'append()'-menetelmään jQuery-koodi:
< pää >< script src = 'https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js' > käsikirjoitus >
< käsikirjoitus >
$ ( asiakirja ) . valmis ( toiminto ( ) {
$ ( '#btn1' ) . klikkaus ( toiminto ( ) {
$ ( 'p' ) . liittää ( ' Liitetty merkkijono .' ) ;
} ) ;
$ ( '#btn2' ) . klikkaus ( toiminto ( ) {
$ ( 'ol' ) . liittää ( '
} ) ;
} ) ;
käsikirjoitus >
pää >
Yllä olevilla koodiriveillä:
- Määritä ensin jQuery ' CDN 'polku sen viralliselta verkkosivustolta' https://jquery.com/ '' -sovelluksen avulla src ”-attribuutti.
- Lisää seuraavaksi pieni komentosarjaosio, joka käyttää ensin ' valmis ()' menetelmä kutsua sanottua ' toiminto ()”, kun HTML-dokumentti ladataan.
- Sen jälkeen ' klikkaus ()' -menetelmä suorittaa toiminnon, joka on linkitetty painikkeeseen, jonka tunnus on ' btn1 ” painiketta napsauttamalla.
- Toiminnon määrittelyssä ' liittää ()' -menetelmää käytetään liittämään kohdistettu kappaleelementti ilmoitetulla merkkijonolla.
- Sama prosessi tehdään lisätylle ' tilattu lista ” Eli solmuobjekti liittääksesi sen annettuun kohteeseen.
Lähtö
Tässä vahvistetaan, että sekä 'String' että 'Node' -objektit on liitetty 'append()'-metodin avulla.
'appendChild()' -menetelmän JavaScript-koodi
Katso nyt JavaScript 'appendChild()' -menetelmää käytännössä:
< käsikirjoitus >toiminto myFunc1 ( ) {
varten. liitä lapsi ( '
Liitetty merkkijono
' ) //Liitä DOM-merkkijono} toiminto myFunc2 ( ) {
konst elementti = asiakirja. CreateElement ( 'että' ) ;
konst solmu = asiakirja. CreateTextNode ( 'Liitetty kohde' ) ;
elementti. liitä lapsi ( solmu ) ; //Liitä DOM-solmu
konst elementti = asiakirja. getElementById ( 'lista' ) ;
elementti. liitä lapsi ( elementti ) ;
}
käsikirjoitus >
Yllä olevassa koodinpätkässä:
- Määritä funktion nimi ' myFunc1 ()', joka käyttää 'appendChild()'-metodia lisäämään lisätyn kappaleen annetulla merkkijonolla.
- Seuraavaksi kohdassa ' myFunc2 ()'-funktiolla 'createElement()' -menetelmä luo uuden luetteloelementin ja lisää sitten siihen tekstiä 'createTextNode()' -menetelmällä.
- Liitä sen jälkeen luotu listasolmu sen tekstiin 'appendChild()' -menetelmällä.
- Liitä lopuksi äskettäin luotu listasolmu avattuun järjestettyyn listaan, jonka tunnus on 'list' 'appendChild()'-metodin avulla.
Lähtö
Kuten näkyy, vain 'Solmu'-objekti liitetään painikkeen napsautukseen, ei 'String'.
Virhe
Paina F12 avataksesi verkkokonsolin ja tarkastaaksesi ongelma:
Kuten näkyy, konsoli näyttää virheen lisättäessä String-objektia 'appendChild()'-menetelmällä. Näin ollen on vahvistettu, että 'appendChild()' -menetelmä ei lisää merkkijono-objektia.
Ero 2: jQuery append()- ja JavaScript appendChild() -menetelmien soveltaminen useisiin solmuobjekteihin
Toinen ero 'append()'- ja 'appendChild()'-menetelmien välillä voidaan analysoida suorittamalla nämä menetelmät useille solmuobjekteille. Näet sen käytännön toteutuksen noudattamalla annettuja koodeja.
HTML-koodi
Käydään läpi HTML-koodi:
< div id = 'main-div' >< div tyyli = 'display:flex; justify-content:center; align-items:center; leveys:50px; korkeus:50px; background:oranssi; marginaali:10px; text-align:center;' > Yksi < / div >
< div tyyli = 'display:flex; justify-content:center; align-items:center; leveys:50px; korkeus:50px; background:oranssi; marginaali:10px; text-align:center;' > Kaksi < / div >
< div tyyli = 'display:flex; justify-content:center; align-items:center; leveys:50px; korkeus:50px; background:oranssi; marginaali:10px; text-align:center;' > Kolme < / div >
< / div >
Tässä yllä olevat koodirivit sisältävät pääelementin '
Huomautus : Yllä kirjoitettua HTML-koodia noudatetaan 'append()'- ja 'appendChild()'-menetelmien toisessa erossa.
append() -menetelmä
Jatka nyt seuraavalla skriptillä:
< käsikirjoitus >konst maindiv = asiakirja. getElementById ( 'main-div' ) ;
konst div4 = asiakirja. CreateElement ( 'div' ) ;
div4. innerHTML = 'neljä' ;
div4. tyyli . taustaväri = 'vaaleanpunainen' ;
div4. luokkaluettelo . lisätä ( 'div' ) ; konst div5 = asiakirja. CreateElement ( 'div' ) ;
div5. innerHTML = 'Viisi' ;
div5. tyyli . taustaväri = 'vaaleanpunainen' ;
div5. luokkaluettelo . lisätä ( 'div' ) ;
maindiv. liittää ( div4 , div5 ) ;
käsikirjoitus >
Yllä olevassa koodinpätkässä:
- 'Maindiv' -muuttuja käyttää lisättyä 'div' -tunnusta 'main-div' -menetelmän avulla 'getElementById()'.
- Seuraavaksi 'createElement()'-menetelmä luo uuden 'div'-solmuobjektin, lisää määritetyn tekstin 'innerHTML'-ominaisuuden avulla ja käyttää taustaväriä 'style.backgroundcolor'-ominaisuuden kautta.
- Sen jälkeen 'add()'-menetelmä lisää määritetyt luokan CSS-ominaisuudet siihen käyttämällä 'classList'-ominaisuutta.
- Samaa menettelyä noudatetaan seuraavalle äskettäin luodulle “”-elementille.
- Lopuksi molemmat äskettäin luodut Node-objektit liitetään samaan aikaan 'append()'-metodin avulla.
Lähtö
Tässä äskettäin luodut useat solmuobjektit liitetään samaan pääelementtiin vastaavasti.
'appendChild()' -menetelmä
Jatka seuraavaksi 'appendChild()' -menetelmällä:
< käsikirjoitus >
maindiv. liitä lapsi ( div4 ) ;
maindiv. liitä lapsi ( div5 ) ;
käsikirjoitus >Kuten näkyy, 'appendChild()' -menetelmä lisää useita solmuobjekteja yksitellen samaan pääelementtiin.
Lähtö
Tulos on sama kuin 'append()'-menetelmä, mutta erilainen solmuobjektien määrittämisessä.
Ero 3: käytettyjen jQuery append()- ja JavaScript appendChild() -menetelmien palautusarvo
Viimeinen ero on 'append()'- ja 'appendChild()'-menetelmien 'palautettu arvo'. Katsotaanpa käytännössä.
Huomautus : HTML-koodi on sama kuin ero 2 (Multiple Node Objects).
'apend()' -menetelmä
Katso annettuja koodirivejä:
< käsikirjoitus >
konsoli. Hirsi ( maindiv. liittää ( div4 ) ) ;
käsikirjoitus >Tässä 'console.log()'-menetelmää käytetään tarkistamaan 'append()'-metodin palautettu arvo samalla kun liitetään määritetty solmuobjekti.
Lähtö
Paina F12 avataksesi verkkokonsolin:
Kuten näkyy, 'append()' -menetelmän palauttama arvo on ' määrittelemätön ”.
appendChild() -menetelmä
Harkitse nyt seuraavaa koodia 'appendChild()'-menetelmällä:
< käsikirjoitus >
konsoli. Hirsi ( maindiv. liitä lapsi ( div4 ) ) ;
käsikirjoitus >Määritä 'appendChild()'-menetelmä 'console.log()'-menetelmällä sama kuin 'append()'-menetelmä.
Lähtö
Tässä tulos palauttaa liitetyn elementin HTML, mukaan lukien tyyliominaisuudet.
Johtopäätös
jQuery' liittää ()' ja JavaScript ' liitä lapsi ()' menetelmät ovat erilaisia ' syntaksit', 'käyttö' ja 'useita solmuobjekteja ”. Lisäksi heidän ' palautetut arvot ” eroavat myös toisistaan. Molemmat menetelmät ovat hyödyllisiä ja niiden käyttö riippuu käyttäjän valinnoista. Tässä oppaassa luetellaan ero jQueryn välillä ' liittää ()' ja JavaScript ' liitä lapsi ()” menetelmä käytännössä.