JavaScript este un limbaj de programare versatil care permite crearea și manipularea elementelor la fel ca HTML (Hyper Text Markup Language). Urmează metodele „append()” și „appendChild()” pentru a realiza această funcționalitate. După cum sugerează și numele, ambele metode atașează elementele HTML, cum ar fi obiectele String sau Node. Cu toate acestea, ele diferă unele de altele în funcție de funcționalitățile lor și de alți factori.
Acest ghid subliniază diferențele cheie dintre jQuery „ adăuga ()” și JavaScript „ appendChild ()” metode.
Înainte de a trece la diferențele dintre jQuery „ adăuga ()” și JavaScript „ appendChild ()”, mai întâi aruncați o privire asupra elementelor de bază ale acestor metode.
Ce este metoda jQuery append()?
jQuery „ adăuga ()” inserează obiectele dorite „Nod” și „String” la sfârșit ca ultimul copil al elementului părinte.
Sintaxă
$ ( selector ) . adăuga ( conţinut , funcţie ( index , html ) )În sintaxa de mai sus:
- conţinut : se referă la elementele HTML, elementele DOM sau obiectele jQuery.
- funcţie : Este un parametru suplimentar care specifică funcția JavaScript definită de utilizator având parametrii „index (poziția elementului)” și „html (html ale elementelor selectate)”.
Ce este metoda JavaScript appendChild()?
Metoda „appendChild()” adaugă doar obiectul „Node” după ultimul copil al elementului părinte. Mai întâi creează obiectul Node dorit folosind metoda „createElement()” și apoi îl adaugă.
Sintaxă
element. appendChild ( nodul )Această sintaxă necesită un singur parametru și anume „ nodul ”.
După cum sugerează numele lor, metodele discutate mai sus sunt diferite unele de altele. Această secțiune descoperă câțiva factori care diferă. Să aruncăm o privire la ele.
Diferențele dintre metoda jQuery append() și JavaScript appendChild().
| Termeni | jQuery append() | JavaScript appendChild() |
|---|---|---|
| Utilizare | Poate fi folosit pentru a adăuga elementul părinte prin adăugarea unui nou „ Nodul ' și ' Şir ” obiecte în același timp. | Poate fi folosit doar pentru a adăuga elementul părinte de noul „ Nodul ” creat folosind „ createElement ()” metoda. |
| Obiecte noduri multiple | „ adăuga ()” poate adăuga mai multe obiecte Node în elementul părinte asociat în același timp în următorul format. Format : „div.append(primul copil, al doilea copil, ‘Linuxhint’);” |
„ appendChild Metoda ()” funcționează bine cu mai multe obiecte Node, dar adaugă doar primul copil la un moment dat și apoi pe următorul. Format : „div.appendChild(primul copil, al doilea copil, ‘Linuxhint’);” |
| Valoare returnată | „ adăuga ()” nu returnează obiectul Node adăugat, deoarece arată o valoare returnată „nedefinită”, de exemplu. Format : console.log(appendChildValue) // nedefinit |
Pe de altă parte, „ appendChild ()” returnează o valoare care conține obiectul Node atașat. Format : console.log(appendChildValue) //
|
Acum treceți la implementarea practică a diferențelor cheie enumerate.
Diferența 1: aplicarea metodelor jQuery append() și JavaScript appendChild()
Conform primei diferențe, „ adăuga ()” adaugă atât Node, cât și String, în timp ce metoda „appendChild()” adaugă numai obiecte Node.
Cod HTML
Mai întâi, aruncați o privire la codul HTML menționat:
< corp >< h2 > Metoda jQuery „append()”. < / h2 > //Pentru append() < h2 > jQuery „appendChild()” Metoda < / h2 > //Pentru appendChild()
< buton id = 'btn1' onclick = „myFunc1()” > Adăugați șirul DOM < / buton >
< buton id = 'btn2' onclick = „myFunc2()” > Adăugați nodul DOM < / buton >
< p id = 'pentru' > Acesta este un paragraf. < / p >
< ol id = 'listă' >
< acea > Tutorial JavaScript 1 < / acea >
< acea > Tutorial JavaScript 2 < / acea >
< acea > Tutorial JavaScript 3 < / acea >
< / ol >
< / corp >
În liniile de cod de mai sus:
- Eticheta „
” definește subtitlul nivelului 2.
- Etichetele „
- Eticheta „
” creează un paragraf gol cu un id alocat „para” pentru a afișa valoarea șirului adăugat.
- Eticheta „
- ” adaugă o listă ordonată cu un id „listă”, iar elementele listate cu ajutorul etichetelor „
- ”.
Notă : Urmați codul HTML scris mai sus în prima diferență a metodei „append()” și „appendChild()”.
„append()” Metoda jQuery Cod
În primul rând, prezentare generală a metodei „append()” cod jQuery:
< cap >< script src = „https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js” > scenariu >
< scenariu >
$ ( document ) . gata ( funcţie ( ) {
$ ( „#btn1” ) . clic ( funcţie ( ) {
$ ( 'p' ) . adăuga ( ' Șir adăugat .' ) ;
} ) ;
$ ( „#btn2” ) . clic ( funcţie ( ) {
$ ( 'ol' ) . adăuga ( „
} ) ;
} ) ;
scenariu >
cap >
În liniile de cod de mai sus:
- Mai întâi, specificați jQuery „ CDN ” calea de pe site-ul său oficial ” https://jquery.com/ ' cu ajutorul ' src ” atribut.
- Apoi, adăugați o mică secțiune de script care utilizează mai întâi „ gata ()” metoda de invocare a declaratului „ funcţie ()” când documentul HTML este încărcat.
- După aceea, „ clic ()” metoda execută funcția care este legată de butonul al cărui id este „ btn1 ” la clic pe butonul.
- În definiția funcției, „ adăuga ()” este utilizată pentru a adăuga elementul de paragraf vizat cu șirul menționat.
- Același proces se face și pentru „ lista ordonata ” adică, obiectul Node pentru a-l atașa la elementul dat.
Ieșire
Aici, se confirmă că atât obiectele „String” cât și „Node” sunt atașate cu ajutorul metodei „append()”.
Codul JavaScript al metodei „appendChild()”.
Acum, uitați-vă practic la metoda JavaScript „appendChild()”:
< scenariu >funcţie myFunc1 ( ) {
pentru. appendChild ( „
Șir adăugat
” ) //Adăugați șirul DOM} funcţie myFunc2 ( ) {
const element = document. createElement ( 'acea' ) ;
const nodul = document. createTextNode ( „Articol atașat” ) ;
element. appendChild ( nodul ) ; //Adăugați nodul DOM
const element = document. getElementById ( 'listă' ) ;
element. appendChild ( element ) ;
}
scenariu >
În fragmentul de cod de mai sus:
- Definiți un nume de funcție „ myFunc1 ()” care folosește metoda „appendChild()” pentru a adăuga paragraful adăugat cu șirul dat.
- În continuare, în „ myFunc2 ()”, metoda „createElement()” creează un nou element de listă și apoi adaugă un text la acesta folosind metoda „createTextNode()”.
- După aceea, adăugați nodul de listă creat cu textul său folosind metoda „appendChild()”.
- În cele din urmă, adăugați nodul listă nou creat la lista ordonată accesată al cărei id este „listă” cu ajutorul metodei „appendChild()”.
Ieșire
După cum s-a văzut, numai obiectul „Nod” se adaugă la clic pe buton, nu „Șir”.
Eroare
Apăsați „F12” pentru a deschide consola web și a inspecta problema:
După cum s-a văzut, consola arată o eroare la adăugarea obiectului String folosind metoda „appendChild()”. Prin urmare, se confirmă că metoda „appendChild()” nu adaugă un obiect String.
Diferența 2: aplicarea metodelor jQuery append() și JavaScript appendChild() asupra mai multor obiecte nod
A doua diferență dintre metodele „append()” și „appendChild()” poate fi analizată prin efectuarea acestor metode pe mai multe obiecte nod. Pentru a vedea implementarea sa practică, urmați codurile date.
Cod HTML
Să trecem prin codul HTML:
< div id = 'main-div' >< div stil = „display:flex; justify-content:center; align-items:center; lățime:50px; înălțime:50px; fundal:orangered; margin:10px; text-align:center;” > unu < / div >
< div stil = „display:flex; justify-content:center; align-items:center; lățime:50px; înălțime:50px; fundal:orangered; margin:10px; text-align:center;” > Două < / div >
< div stil = „display:flex; justify-content:center; align-items:center; lățime:50px; înălțime:50px; fundal:orangered; margin:10px; text-align:center;” > Trei < / div >
< / div >
Aici, liniile de cod de mai sus conțin un element principal „
Notă : Codul HTML scris mai sus este urmat în a doua diferență a metodei „append()” și „appendChild()”.
Append() Metoda
Acum, continuați cu următorul script:
< scenariu >const maindiv = document. getElementById ( 'main-div' ) ;
const div4 = document. createElement ( 'div' ) ;
div4. innerHTML = „Patru” ;
div4. stil . culoare de fundal = 'roz' ;
div4. classList . adăuga ( 'div' ) ; const div5 = document. createElement ( 'div' ) ;
div5. innerHTML = 'Cinci' ;
div5. stil . culoare de fundal = 'roz' ;
div5. classList . adăuga ( 'div' ) ;
maindiv. adăuga ( div4 , div5 ) ;
scenariu >
În fragmentul de cod de mai sus:
- Variabila „maindiv” accesează „div” adăugat folosind id-ul „main-div” cu ajutorul metodei „getElementById()”.
- Apoi, metoda „createElement()” creează un nou obiect Node „div”, adaugă textul specificat folosind proprietatea „innerHTML” și aplică culoarea de fundal prin proprietatea „style.backgroundcolor”.
- După aceea, metoda „add()” adaugă proprietățile CSS ale clasei specificate folosind proprietatea „classList”.
- Aceeași procedură este urmată pentru următorul element nou creat „”.
- În sfârșit, ambele obiecte Node nou create sunt atașate în același timp cu ajutorul metodei „append()”.
Ieșire
Aici, noile obiecte Node multiple nou create sunt atașate la același element părinte în consecință.
Metoda „appendChild()”.
Apoi, continuați cu metoda „appendChild()”:
< scenariu >
maindiv. appendChild ( div4 ) ;
maindiv. appendChild ( div5 ) ;
scenariu >După cum s-a văzut, metoda „appendChild()” adaugă mai multe obiecte Node unul câte unul la același element părinte.
Ieșire
Ieșirea este aceeași cu metoda „append()”, dar diferită în specificarea obiectelor Node.
Diferența 3: Valoarea de returnare a metodelor jQuery append() și JavaScript appendChild() aplicate
Ultima diferență este „valoarea returnată” a metodelor „append()” și „appendChild()”. Să vedem practic.
Notă : Codul HTML este același cu Diferența 2 (Obiecte cu noduri multiple).
Metoda „apend()”.
Priviți liniile de cod date:
< scenariu >
consolă. Buturuga ( maindiv. adăuga ( div4 ) ) ;
scenariu >Aici, metoda „console.log()” este aplicată pentru a verifica valoarea returnată a metodei „append()” în timp ce se adaugă obiectul Node specificat.
Ieșire
Apăsați „F12” pentru a deschide consola web:
După cum s-a văzut, valoarea returnată a metodei „append()” este „ nedefinit ”.
AppendChild() Metoda
Acum, luați în considerare următorul cod utilizând metoda „appendChild()”:
< scenariu >
consolă. Buturuga ( maindiv. appendChild ( div4 ) ) ;
scenariu >Specificați metoda „appendChild()” cu metoda „console.log()” la fel ca metoda „append()”.
Ieșire
Aici, rezultatul returnează elementul atașat HTML, inclusiv proprietățile de stil.
Concluzie
jQuery „ adăuga ()” și JavaScript „ appendChild ()” metodele sunt diferite în funcție de „ sintaxe”, „utilizare” și „obiecte Node multiple ”. Mai mult, lor „ valori returnate ” sunt de asemenea diferiți unul de celălalt. Ambele metode sunt utile și utilizarea lor depinde de alegerile utilizatorului. Acest ghid a enumerat diferența dintre jQuery „ adăuga ()” și JavaScript „ appendChild ()” metoda practic.