Ang JavaScript ay isang versatile programming language na nagbibigay-daan sa paglikha at pagmamanipula ng mga elementong katulad ng HTML (Hyper Text Markup Language). Sinusundan nito ang mga pamamaraang 'append()' at 'appendChild()' upang maisagawa ang pagpapaandar na ito. Tulad ng iminumungkahi ng kanilang pangalan, ang parehong mga pamamaraan ay nagdaragdag ng mga elemento ng HTML tulad ng String o Node na mga bagay. Gayunpaman, naiiba sila sa bawat isa depende sa kanilang mga pag-andar at iba pang mga kadahilanan.
Binibigyang-diin ng gabay na ito ang mga pangunahing pagkakaiba sa pagitan ng jQuery ' dugtungan ()' at JavaScript ' idagdagBata ()' paraan.
Bago lumipat sa mga pagkakaiba sa pagitan ng jQuery ' dugtungan ()' at JavaScript ' idagdagBata ()', tingnan muna ang mga pangunahing kaalaman ng mga pamamaraang ito.
Ano ang jQuery append() Method?
Ang jQuery ' dugtungan ()' na pamamaraan ay naglalagay ng gustong 'Node' at 'String' na mga bagay sa dulo bilang huling anak ng parent na elemento.
Syntax
$ ( tagapili ) . dugtungan ( nilalaman , function ( index , html ) )Sa itaas na syntax:
- nilalaman : Ito ay tumutukoy sa mga elemento ng HTML, mga elemento ng DOM, o mga bagay na jQuery.
- function : Isa itong karagdagang parameter na tumutukoy sa function ng JavaScript na tinukoy ng user na mayroong mga parameter na 'index (posisyon ng elemento)' at 'html (html ng mga napiling elemento)'.
Ano ang JavaScript appendChild() Method?
Ang pamamaraang 'appendChild()' ay nagdaragdag lamang ng object na 'Node' pagkatapos ng huling anak ng elemento ng magulang. Ito ay unang lumilikha ng nais na Node object gamit ang 'createElement()' na paraan at pagkatapos ay idinagdag ito.
Syntax
elemento. idagdagBata ( node )Ang syntax na ito ay nangangailangan lamang ng isang parameter i.e., ' node ”.
Tulad ng iminumungkahi ng kanilang mga pangalan, ang mga pamamaraan na tinalakay sa itaas ay naiiba sa bawat isa. Inilalarawan ng seksyong ito ang ilang salik kung saan naiiba ang mga ito. Tingnan natin sila.
Mga Pagkakaiba sa pagitan ng jQuery append() at JavaScript appendChild() Method
| Mga tuntunin | jQuery append() | JavaScript appendChild() |
|---|---|---|
| Paggamit | Maaari itong magamit upang idagdag ang elemento ng magulang sa pamamagitan ng pagdaragdag ng bagong ' Node 'at' String ” sabay-sabay na bagay. | Magagamit lang ito para idagdag ang parent element ng bagong “ Node ” ginawa gamit ang “ createElement ()” paraan. |
| Maramihang Mga Bagay sa Node | Ang ' dugtungan ()' na paraan ay maaaring magdagdag ng maraming Node object sa nauugnay na parent element nito nang sabay-sabay sa sumusunod na format. Format : “div.append(firstchild, secondchild, ‘Linuxhint’);” |
Ang ' idagdagBata ()' na pamamaraan ay gumagana nang maayos sa maraming mga bagay sa Node ngunit idinaragdag lamang nito ang unang bata sa isang pagkakataon at pagkatapos ay ang susunod. Format : “div.appendChild(firstchild, secondchild, ‘Linuxhint’);” |
| Ibalik ang Halaga | Ang ' dugtungan ()' na pamamaraan ay hindi nagbabalik ng nakadugtong na bagay na Node dahil ito ay nagpapakita ng 'hindi natukoy' na ibinalik na halaga i.e. Format : console.log(appendChildValue) // hindi natukoy |
Sa kabilang banda, ang ' idagdagBata ()' na pamamaraan ay nagbabalik ng isang halaga na naglalaman ng nakadugtong na bagay na Node. Format : console.log(appendChildValue) //
|
Ngayon lumipat sa praktikal na pagpapatupad ng mga nakalistang pangunahing pagkakaiba.
Pagkakaiba 1: Paglalapat ng jQuery append() at JavaScript appendChild() Methods
Ayon sa unang pagkakaiba, ang ' dugtungan ()' na pamamaraan ay nagdaragdag ng parehong Node at String habang ang 'appendChild()' na paraan ay nagdaragdag lamang ng mga bagay na Node.
HTML Code
Una, tingnan ang nakasaad na HTML code:
< katawan >< h2 > jQuery 'apend()' Paraan < / h2 > //Para sa append() < h2 > jQuery 'appendChild()' Paraan < / h2 > //Para sa appendChild()
< pindutan id = 'btn1' onclick = 'myFunc1()' > Idagdag ang String ng DOM < / pindutan >
< pindutan id = 'btn2' onclick = 'myFunc2()' > Idagdag ang DOM Node < / pindutan >
< p id = 'para sa' > Ito ay isang talata. < / p >
< ol id = 'listahan' >
< na > Tutorial sa JavaScript 1 < / na >
< na > Tutorial sa JavaScript 2 < / na >
< na > Tutorial sa JavaScript 3 < / na >
< / ol >
< / katawan >
Sa mga linya ng code sa itaas:
- Tinutukoy ng tag na “
” ang subheading ng level 2.
- Ang mga tag na “
- Ang tag na '
' ay gumagawa ng isang walang laman na talata na may nakatalagang id na 'para' upang ipakita ang nakadugtong na halaga ng string.
- Ang tag na “
- ” ay nagdaragdag ng nakaayos na listahan na may id na “listahan”, at ang mga nakalistang item sa tulong ng mga tag na “
- ”.
Tandaan : Sundin ang nakasulat sa itaas na HTML code sa unang pagkakaiba ng parehong 'append()' at 'appendChild()' na mga pamamaraan.
“Append()” Method jQuery Code
Una, pangkalahatang-ideya ng 'append()' na pamamaraan na jQuery code:
< ulo >< script src = 'https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js' > script >
< script >
$ ( dokumento ) . handa na ( function ( ) {
$ ( '#btn1' ) . i-click ( function ( ) {
$ ( 'p' ) . dugtungan ( ' Idinagdag na String .' ) ;
} ) ;
$ ( '#btn2' ) . i-click ( function ( ) {
$ ( 'ol' ) . dugtungan ( '
} ) ;
} ) ;
script >
ulo >
Sa mga linya ng code sa itaas:
- Una, tukuyin ang jQuery ' CDN ' path mula sa opisyal na website nito ' https://jquery.com/ 'sa tulong ng' src ” katangian.
- Susunod, magdagdag ng maliit na seksyon ng script na unang gumagamit ng “ handa na ()' na paraan para gamitin ang nakasaad na ' function ()” kapag na-load ang HTML na dokumento.
- Pagkatapos nito, ang ' i-click ()' na pamamaraan ay nagpapatupad ng function na naka-link sa button na ang id ay ' btn1 ” sa pag-click sa pindutan.
- Sa kahulugan ng function, ang ' dugtungan ()” na paraan ay ginagamit upang idugtong ang naka-target na elemento ng talata na may nakasaad na string.
- Ang parehong proseso ay ginagawa para sa idinagdag na ' iniutos na listahan ” ibig sabihin, Node object upang idagdag ito sa ibinigay na item.
Output
Dito, ito ay nakumpirma na ang parehong 'String' at ang 'Node' na mga bagay ay idinagdag sa tulong ng 'append()' na paraan.
“AppendChild()” Method JavaScript Code
Ngayon, halos tingnan ang JavaScript na 'appendChild()' na pamamaraan:
< script >function myFunc1 ( ) {
para sa. idagdagBata ( '
Idinagdag na String
' ) //Idugtong ang String ng DOM} function myFunc2 ( ) {
const elemento = dokumento. createElement ( 'yan' ) ;
const node = dokumento. createTextNode ( 'Idinagdag na Item' ) ;
elemento. idagdagBata ( node ) ; //Idagdag ang DOM Node
const elemento = dokumento. getElementById ( 'listahan' ) ;
elemento. idagdagBata ( elemento ) ;
}
script >
Sa snippet ng code sa itaas:
- Tukuyin ang pangalan ng function na ' myFunc1 ()' na gumagamit ng 'appendChild()' na paraan upang idugtong ang idinagdag na talata gamit ang ibinigay na string.
- Susunod, sa ' myFunc2 ()', ang 'createElement()' na paraan ay lumilikha ng isang bagong elemento ng listahan at pagkatapos ay nagdaragdag ng ilang teksto dito gamit ang 'createTextNode()' na paraan.
- Pagkatapos nito, idugtong ang nilikha na node ng listahan kasama ang teksto nito gamit ang pamamaraang 'appendChild()'.
- Panghuli, idugtong ang bagong likhang Node ng listahan sa na-access na listahan ng order na ang id ay 'listahan' sa tulong ng pamamaraang 'appendChild()'.
Output
Gaya ng nakikita, tanging ang bagay na 'Node' ang nakadugtong sa pag-click sa pindutan, hindi ang 'String'.
Error
Pindutin ang 'F12' upang buksan ang web console at suriin ang problema:
Gaya ng nakikita, nagpapakita ang console ng error sa pagdaragdag ng String object gamit ang 'appendChild()' na paraan. Samakatuwid, nakumpirma na ang 'appendChild()' na paraan ay hindi nagdaragdag ng isang String object.
Pagkakaiba 2: Paglalapat ng jQuery append() at JavaScript appendChild() Methods Sa Maramihang Node Objects
Ang pangalawang pagkakaiba sa pagitan ng mga pamamaraang 'append()' at 'appendChild()' ay maaaring masuri sa pamamagitan ng pagsasagawa ng mga pamamaraang ito sa maraming node object. Upang makita ang praktikal na pagpapatupad nito, sundin ang mga ibinigay na code.
HTML Code
Tingnan natin ang HTML code:
< div id = 'main-div' >< div istilo = 'display:flex; justify-content:center; align-items:center; width:50px; height:50px; background:orangered; margin:10px; text-align:center;' > Isa < / div >
< div istilo = 'display:flex; justify-content:center; align-items:center; width:50px; height:50px; background:orangered; margin:10px; text-align:center;' > Dalawa < / div >
< div istilo = 'display:flex; justify-content:center; align-items:center; width:50px; height:50px; background:orangered; margin:10px; text-align:center;' > Tatlo < / div >
< / div >
Dito, ang mga linya ng code sa itaas ay naglalaman ng pangunahing elementong “
Tandaan : Ang nakasulat sa itaas na HTML code ay sinusundan sa pangalawang pagkakaiba ng parehong 'append()' at 'appendChild()' na mga pamamaraan.
Append() Paraan
Ngayon, magpatuloy sa sumusunod na script:
< script >const maindiv = dokumento. getElementById ( 'main-div' ) ;
const div4 = dokumento. createElement ( 'div' ) ;
div4. innerHTML = 'Apat' ;
div4. istilo . kulay ng background = 'pink' ;
div4. Listahan ng klase . idagdag ( 'div' ) ; const div5 = dokumento. createElement ( 'div' ) ;
div5. innerHTML = 'Lima' ;
div5. istilo . kulay ng background = 'pink' ;
div5. Listahan ng klase . idagdag ( 'div' ) ;
maindiv. dugtungan ( div4 , div5 ) ;
script >
Sa snippet ng code sa itaas:
- Ina-access ng variable na 'maindiv' ang idinagdag na 'div' gamit ang id nitong 'main-div' sa tulong ng pamamaraang 'getElementById()'.
- Susunod, ang 'createElement()' na paraan ay lumilikha ng bagong 'div' Node object, idinaragdag ang tinukoy na text gamit ang 'innerHTML' property, at inilalapat ang kulay ng background sa pamamagitan ng 'style.backgroundcolor' property.
- Pagkatapos nito, idinaragdag ng 'add()' na paraan ang tinukoy na class CSS properties dito gamit ang 'classList' property.
- Ang parehong pamamaraan ay sinusunod para sa susunod na bagong likhang '' na elemento.
- Panghuli, ang mga bagong likhang bagay na Node ay idinagdag sa parehong oras sa tulong ng pamamaraang 'idagdag()'.
Output
Dito, ang bagong likhang maraming Node object ay idinagdag sa parehong elemento ng magulang nang naaayon.
Paraan ng “appendChild()”.
Susunod, magpatuloy sa 'appendChild()' na paraan:
< iskrip >
maindiv. idagdagBata ( div4 ) ;
maindiv. idagdagBata ( div5 ) ;
iskrip >Gaya ng nakikita, ang pamamaraang 'appendChild()' ay nagdaragdag ng maramihang Node object nang paisa-isa sa parehong elemento ng magulang.
Output
Ang output ay kapareho ng 'append()' na paraan ngunit naiiba sa pagtukoy sa mga bagay na Node.
Pagkakaiba 3: Return Value ng Applied jQuery append() at JavaScript appendChild() Methods
Ang huling pagkakaiba ay ang 'ibinalik na halaga' ng 'append()' at ang 'appendChild()' na mga pamamaraan. Tingnan natin ito nang praktikal.
Tandaan : Ang HTML code ay kapareho ng Difference 2 (Multiple Node Objects).
Paraan ng 'idagdag()'.
Tingnan ang ibinigay na mga linya ng code:
< iskrip >
console. log ( maindiv. dugtungan ( div4 ) ) ;
iskrip >Dito, inilapat ang 'console.log()' na paraan upang suriin ang ibinalik na halaga ng pamamaraang 'append()' habang idinadagdag ang tinukoy na Node object.
Output
Pindutin ang 'F12' upang buksan ang web console:
Gaya ng nakikita, ang ibinalik na halaga ng pamamaraang 'append()' ay ' hindi natukoy ”.
AppendChild() Method
Ngayon, isaalang-alang ang sumusunod na code gamit ang 'appendChild()' na paraan:
< iskrip >
console. log ( maindiv. idagdagBata ( div4 ) ) ;
iskrip >Tukuyin ang 'appendChild()' na paraan gamit ang 'console.log()' na paraan na katulad ng 'append()' na paraan.
Output
Dito, ibinabalik ng output ang nakadugtong na elementong HTML kasama ang mga katangian ng pag-istilo sa halip.
Konklusyon
Ang jQuery ' dugtungan ()' at ang JavaScript ' idagdagBata ()' ang mga pamamaraan ay naiiba batay sa kanilang ' syntaxes', 'paggamit', at 'maramihang Node object ”. Bukod dito, ang kanilang ' ibinalik na mga halaga ” ay iba rin sa isa’t isa. Ang parehong mga pamamaraan ay kapaki-pakinabang at ang kanilang paggamit ay nakasalalay sa mga pagpipilian ng gumagamit. Inilista ng gabay na ito ang pagkakaiba sa pagitan ng jQuery ' dugtungan ()' at ang JavaScript ' idagdagBata ()” sa praktikal na paraan.