JavaScript on mitmekülgne programmeerimiskeel, mis võimaldab HTML-iga (Hyper Text Markup Language) samade elementide loomist ja manipuleerimist. Selle funktsiooni täitmiseks järgitakse meetodeid 'append()' ja 'appendChild()'. Nagu nimigi ütleb, lisavad mõlemad meetodid HTML-i elemendid, nagu String- või Node-objektid. Kuid need erinevad üksteisest sõltuvalt nende funktsioonidest ja muudest teguritest.
See juhend rõhutab jQuery peamisi erinevusi ' lisama ()' ja JavaScript' lisalaps ()” meetodid.
Enne jQuery vaheliste erinevuste juurde liikumist ' lisama ()' ja JavaScript' lisalaps ()” meetodid, vaadake esmalt nende meetodite põhitõdesid.
Mis on jQuery append() meetod?
jQuery' lisama ()” meetod lisab soovitud objektid 'Sõlm' ja 'String' lõppu kui vanemelemendi viimase alam.
Süntaks
$ ( valija ) . lisama ( sisu , funktsiooni ( indeks , html ) )Ülaltoodud süntaksis:
- sisu : see viitab HTML-i elementidele, DOM-i elementidele või jQuery objektidele.
- funktsiooni : see on lisaparameeter, mis määrab kasutaja määratud JavaScripti funktsiooni, millel on parameetrid 'indeks (elemendi asukoht)' ja 'html (valitud elementide html)'.
Mis on JavaScripti appendChild() meetod?
Meetod 'appendChild()' lisab objekti 'Node' ainult pärast emaelemendi viimast alamosa. Esmalt loob see soovitud sõlmeobjekti, kasutades meetodit 'createElement()' ja seejärel lisab selle.
Süntaks
element. lisalaps ( sõlm )See süntaks nõuab ainult ühte parameetrit, st ' sõlm ”.
Nagu nende nimed viitavad, on ülalkirjeldatud meetodid üksteisest erinevad. Selles jaotises kirjeldatakse mõningaid tegureid, mille poolest need erinevad. Vaatame neid.
Erinevused meetodi jQuery append() ja JavaScript appendChild() vahel
| Tingimused | jQuery append() | JavaScripti appendChild() |
|---|---|---|
| Kasutamine | Seda saab kasutada emaelemendi lisamiseks, lisades uue ' Sõlm ” ja „ String ” objektid samal ajal. | Seda saab kasutada ainult emaelemendi lisamiseks uue ' Sõlm ' loodud kasutades ' looElement ()” meetodil. |
| Mitu sõlmeobjekti | ' lisama ()” meetod võib lisada mitu sõlmeobjekti sellega seotud emaelemendis korraga järgmises vormingus. Vorming : 'div.append(esimene laps, teine laps, 'Linuxhint');' |
' lisalaps ()” meetod töötab hästi mitme sõlmeobjektiga, kuid see lisab korraga ainult esimese lapse ja seejärel järgmise. Vorming : 'div.appendChild(esimene laps, teine laps, 'Linuxhint');' |
| Tagastusväärtus | ' lisama ()' meetod ei tagasta lisatud Node objekti, kuna see näitab 'määratlemata' tagastatud väärtust, st. Vorming : console.log(appendChildValue) // määramata |
Teisest küljest ' lisalaps ()” meetod tagastab väärtuse, mis sisaldab lisatud sõlmeobjekti. Vorming : console.log(appendChildValue) //
|
Nüüd liikuge edasi loetletud peamiste erinevuste praktilise rakendamise juurde.
1. erinevus: jQuery append() ja JavaScript appendChild() meetodite rakendamine
Esimese erinevuse kohaselt on ' lisama ()' meetod lisab nii sõlme kui ka stringi, samas kui meetod 'appendChild()' lisab ainult sõlmeobjektid.
HTML-kood
Kõigepealt vaadake märgitud HTML-koodi:
< keha >< h2 > jQuery 'apend()' meetod < / h2 > //Lisada() jaoks < h2 > jQuery 'appendChild()' meetod < / h2 > //For appendChild()
< nuppu id = 'btn1' onclick = 'myFunc1()' > Lisage DOM-string < / nuppu >
< nuppu id = 'btn2' onclick = 'myFunc2()' > Lisa DOM-i sõlm < / nuppu >
< lk id = 'eest' > See on lõik. < / lk >
< ol id = 'nimekiri' >
< et > JavaScripti õpetus 1 < / et >
< et > JavaScripti õpetus 2 < / et >
< et > JavaScripti õpetus 3 < / et >
< / ol >
< / keha >
Ülaltoodud koodiridades:
- Silt “
” määrab 2. taseme alampealkirja.
- Märgendid „
- Märgend „
” loob lisatud stringiväärtuse kuvamiseks tühja lõigu, millele on määratud ID „para”.
- Märgend “
- ” lisab järjestatud loendi ID-ga “list” ja loetletud üksused siltide “
- ” abil.
Märge : järgige ülalkirjeldatud HTML-koodi nii meetodi 'append()' kui ka 'appendChild()' esimeses erinevuses.
'apend()' meetod jQuery Code
Esiteks, ülevaade meetodi 'apend()' jQuery koodist:
< pea >< skript src = 'https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js' > stsenaarium >
< stsenaarium >
$ ( dokument ) . valmis ( funktsiooni ( ) {
$ ( '#btn1' ) . klõpsa ( funktsiooni ( ) {
$ ( 'p' ) . lisama ( ' Lisatud string .' ) ;
} ) ;
$ ( '#btn2' ) . klõpsa ( funktsiooni ( ) {
$ ( 'ol' ) . lisama ( '
} ) ;
} ) ;
stsenaarium >
pea >
Ülaltoodud koodiridades:
- Esmalt määrake jQuery ' CDN 'tee selle ametlikult veebisaidilt' https://jquery.com/ ' abiga ' src ” atribuut.
- Järgmisena lisage väike skriptiosa, mis kasutab esmalt ' valmis ()' meetod, et kutsuda välja märgitud ' funktsiooni ()”, kui HTML-dokument on laaditud.
- Pärast seda ' klõpsa ()' meetod käivitab funktsiooni, mis on seotud nupuga, mille ID on ' btn1 ” nupu klõpsamisel.
- Funktsiooni määratluses on ' lisama ()” meetodit kasutatakse sihitud lõigu elemendi lisamiseks märgitud stringiga.
- Sama protseduur tehakse lisatud ' tellitud nimekiri st sõlmeobjekt selle lisamiseks antud üksusele.
Väljund
Siin kinnitatakse, et nii objektid 'String' kui ka 'Sõlm' lisatakse meetodi 'apend()' abil.
'appendChild()' meetod JavaScripti kood
Nüüd vaadake praktiliselt JavaScripti 'appendChild()' meetodit:
< stsenaarium >funktsiooni minu Funktsioon1 ( ) {
jaoks. lisalaps ( '
Lisatud string
' ) //Lisa DOM-string} funktsiooni myFunc2 ( ) {
konst element = dokument. looElement ( 'see' ) ;
konst sõlm = dokument. CreateTextNode ( 'Lisatud üksus' ) ;
element. lisalaps ( sõlm ) ; //Lisa DOM-i sõlm
konst element = dokument. getElementById ( 'nimekiri' ) ;
element. lisalaps ( element ) ;
}
stsenaarium >
Ülaltoodud koodilõigul:
- Määrake funktsiooni nimi ' minu Funktsioon1 ()', mis kasutab lisatud lõigu lisamiseks antud stringiga meetodit 'appendChild()'.
- Järgmisena jaotises ' myFunc2 ()” funktsiooni abil loob meetod “createElement()” uue loendielemendi ja lisab sellele siis teksti, kasutades meetodit “createTextNode()”.
- Pärast seda lisage loodud loendi sõlm selle tekstiga, kasutades meetodit 'appendChild()'.
- Lõpuks lisage vastloodud loendi sõlm avatud järjestatud loendisse, mille ID on 'loend', kasutades 'appendChild()' meetodit.
Väljund
Nagu näha, lisatakse nupuklõpsule ainult objekt 'Sõlm', mitte 'String'.
Viga
Veebikonsooli avamiseks ja probleemi kontrollimiseks vajutage klahvi F12:
Nagu näha, näitab konsool tõrke String-objekti lisamisel meetodi „appendChild()” abil. Seega kinnitatakse, et meetod 'appendChild()' ei lisa stringiobjekti.
2. erinevus: jQuery append() ja JavaScript appendChild() meetodite rakendamine mitmele sõlmeobjektile
Teist erinevust meetodite 'append()' ja 'appendChild()' vahel saab analüüsida, rakendades neid meetodeid mitmel sõlmeobjektil. Selle praktilise rakendamise nägemiseks järgige antud koode.
HTML-kood
Vaatame läbi HTML-koodi:
< div id = 'main-div' >< div stiilis = 'display:flex; justify-content:center; align-items:center; laius:50px; kõrgus:50px; taust:oranžeeritud; veeris:10px; text-align:center;' > Üks < / div >
< div stiilis = 'display:flex; justify-content:center; align-items:center; laius:50px; kõrgus:50px; taust:oranžeeritud; veeris:10px; text-align:center;' > Kaks < / div >
< div stiilis = 'display:flex; justify-content:center; align-items:center; laius:50px; kõrgus:50px; taust:oranžeeritud; veeris:10px; text-align:center;' > Kolm < / div >
< / div >
Siin sisaldavad ülaltoodud koodiread peamist elementi '
Märge : Ülalkirjutatud HTML-koodi järgitakse nii meetodi 'append()' kui ka 'appendChild()' teises erinevuses.
append() meetod
Nüüd jätkake järgmise skriptiga:
< stsenaarium >konst maindiv = dokument. getElementById ( 'main-div' ) ;
konst div4 = dokument. looElement ( 'div' ) ;
div4. sisemine HTML = 'neli' ;
div4. stiilis . taustavärv = 'roosa' ;
div4. klassiloend . lisama ( 'div' ) ; konst div5 = dokument. looElement ( 'div' ) ;
div5. sisemine HTML = 'viis' ;
div5. stiilis . taustavärv = 'roosa' ;
div5. klassiloend . lisama ( 'div' ) ;
maindiv. lisama ( div4 , div5 ) ;
stsenaarium >
Ülaltoodud koodilõigul:
- Muutuja 'maindiv' pääseb juurde lisatud 'div'-le, kasutades selle ID-d 'main-div' meetodi 'getElementById()' abil.
- Järgmisena loob meetod “createElement()” uue “div” sõlmeobjekti, lisab määratud teksti atribuudi “innerHTML” abil ja rakendab taustavärvi atribuudi “style.backgroundcolor” kaudu.
- Pärast seda lisab meetod 'add()' sellele atribuudi 'classList' abil määratud klassi CSS-i atribuudid.
- Sama protseduuri järgitakse ka järgmise äsja loodud “” elemendi puhul.
- Lõpuks lisatakse mõlemad äsja loodud sõlmeobjektid meetodi 'apend()' abil korraga.
Väljund
Siin lisatakse vastloodud mitu sõlmeobjekti vastavalt samale vanemelemendile.
'apendChild()' meetod
Järgmisena jätkake meetodiga 'appendChild()'.
< stsenaarium >
maindiv. lisalaps ( div4 ) ;
maindiv. lisalaps ( div5 ) ;
stsenaarium >Nagu näha, lisab meetod 'appendChild()' mitu sõlmeobjekti ükshaaval samale lähteelemendile.
Väljund
Väljund on sama mis meetodil 'apend()', kuid sõlmeobjektide määramisel on see erinev.
3. erinevus: rakendatud jQuery append() ja JavaScript appendChild() meetodite tagastamisväärtus
Viimane erinevus on meetodi 'append()' ja 'appendChild()' 'tagastatud väärtus'. Vaatame seda praktiliselt.
Märge : HTML-kood on sama, mis erinevus 2 (mitme sõlmeobjekti).
'lisa ()' meetod
Vaadake antud koodiridu:
< stsenaarium >
konsool. logi ( maindiv. lisama ( div4 ) ) ;
stsenaarium >Siin rakendatakse meetodit 'console.log()', et kontrollida meetodi 'append()' tagastatud väärtust määratud sõlmeobjekti lisamisel.
Väljund
Veebikonsooli avamiseks vajutage 'F12':
Nagu näha, on meetodi 'apend()' tagastatud väärtus ' määratlemata ”.
appendChild() meetod
Nüüd kaaluge järgmist koodi, kasutades meetodit 'appendChild()'.
< stsenaarium >
konsool. logi ( maindiv. lisalaps ( div4 ) ) ;
stsenaarium >Määrake meetod 'appendChild()' meetodiga 'console.log()' sama mis meetod 'append()'.
Väljund
Siin tagastab väljund lisatud elemendi HTML, sealhulgas stiiliatribuudid.
Järeldus
jQuery' lisama ()' ja JavaScript ' lisalaps ()' meetodid on erinevad sõltuvalt nende ' süntaksid“, „kasutus“ ja „mitu sõlmeobjekti ”. Veelgi enam, nende ' tagastatud väärtused ” on samuti üksteisest erinevad. Mõlemad meetodid on kasulikud ja nende kasutamine sõltub kasutaja valikutest. Selles juhendis on loetletud erinevused jQuery vahel lisama ()' ja JavaScript ' lisalaps ()” meetodit praktiliselt.