JavaScript è un linguaggio di programmazione versatile che consente la creazione e la manipolazione degli elementi come HTML (Hyper Text Markup Language). Segue i metodi 'append()' e 'appendChild()' per eseguire questa funzionalità. Come suggerisce il nome, entrambi i metodi aggiungono gli elementi HTML come gli oggetti String o Node. Tuttavia, differiscono l'uno dall'altro a seconda delle loro funzionalità e di altri fattori.
Questa guida sottolinea le principali differenze tra jQuery ' aggiungere ()' e JavaScript ' appendChild ()”.
Prima di passare alle differenze tra il jQuery “ aggiungere ()' e JavaScript ' appendChild ()', prima di tutto dai un'occhiata alle basi di questi metodi.
Qual è il metodo jQuery append()?
Il jQuery ' aggiungere ()” inserisce gli oggetti desiderati “Nodo” e “Stringa” alla fine come ultimo figlio dell'elemento padre.
Sintassi
$ ( selettore ) . aggiungere ( contenuto , funzione ( indice , html ) )Nella sintassi precedente:
- contenuto : si riferisce agli elementi HTML, agli elementi DOM o agli oggetti jQuery.
- funzione : è un parametro aggiuntivo che specifica la funzione JavaScript definita dall'utente con i parametri 'indice (posizione dell'elemento)' e 'html (html degli elementi selezionati)'.
Che cos'è il metodo JavaScript appendChild()?
Il metodo 'appendChild()' aggiunge solo l'oggetto 'Node' dopo l'ultimo figlio dell'elemento genitore. Prima crea l'oggetto Node desiderato usando il metodo 'createElement()' e poi lo accoda.
Sintassi
elemento. appendChild ( nodo )Questa sintassi richiede solo un parametro, ad esempio ' nodo ”.
Come suggeriscono i loro nomi, i metodi sopra discussi sono diversi l'uno dall'altro. Questa sezione illustra alcuni fattori su cui sono diversi. Diamo un'occhiata a loro.
Differenze tra il metodo jQuery append() e JavaScript appendChild()
| Termini | jQuery append() | JavaScript appendChild() |
|---|---|---|
| Utilizzo | Può essere utilizzato per aggiungere l'elemento genitore aggiungendo un nuovo ' Nodo ' E ' Corda ” oggetti allo stesso tempo. | Può essere utilizzato solo per aggiungere l'elemento genitore con il nuovo ' Nodo ” creato utilizzando il “ createElement ()' metodo. |
| Oggetti nodo multipli | IL ' aggiungere ()' può aggiungere contemporaneamente più oggetti Node nell'elemento genitore associato nel seguente formato. Formato : 'div.append(firstchild, secondchild, 'Linuxhint');' |
IL ' appendChild ()” funziona bene con più oggetti Node ma aggiunge solo il primo figlio alla volta e poi quello successivo. Formato : 'div.appendChild(firstchild, secondchild, 'Linuxhint');' |
| Valore di ritorno | IL ' aggiungere ()' non restituisce l'oggetto Node aggiunto poiché mostra un valore restituito 'non definito', ad es. Formato : console.log(appendChildValue) // non definito |
D'altra parte, il “ appendChild ()' restituisce un valore contenente l'oggetto Node accodato. Formato : console.log(appendChildValue) //
|
Ora passa all'implementazione pratica delle differenze chiave elencate.
Differenza 1: applicazione dei metodi jQuery append() e JavaScript appendChild()
Secondo la prima differenza, il “ aggiungere ()' aggiunge sia Node che String mentre il metodo 'appendChild()' aggiunge solo oggetti Node.
Codice HTML
Innanzitutto, dai un'occhiata al codice HTML dichiarato:
< corpo >< h2 > metodo jQuery 'append()'. < / h2 > //Per append() < h2 > metodo jQuery 'appendChild()'. < / h2 > //Per appendChild()
< pulsante id = 'btn1' al clic = 'miaFunzione1()' > Aggiungi stringa DOM < / pulsante >
< pulsante id = 'btn2' al clic = 'miaFunzione2()' > Aggiungi nodo DOM < / pulsante >
< P id = 'per' > Questo è un paragrafo. < / P >
< ol id = 'elenco' >
< Quello > Esercitazione JavaScript 1 < / Quello >
< Quello > Esercitazione JavaScript 2 < / Quello >
< Quello > Esercitazione JavaScript 3 < / Quello >
< / ol >
< / corpo >
Nelle righe di codice sopra:
- Il tag '
' definisce il sottotitolo del livello 2.
- I tag '
- Il tag '
' crea un paragrafo vuoto con un id assegnato 'para' per mostrare il valore di stringa aggiunto.
- Il tag '
- ' aggiunge un elenco ordinato con un id 'list' e gli elementi elencati con l'aiuto dei tag '
- '.
Nota : Segui il codice HTML sopra scritto nella prima differenza di entrambi i metodi 'append()' e 'appendChild()'.
Codice jQuery del metodo “append()”.
In primo luogo, panoramica del codice jQuery del metodo “append()”:
< Testa >< script sorgente = 'https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js' > copione >
< copione >
$ ( documento ) . pronto ( funzione ( ) {
$ ( '#btn1' ) . clic ( funzione ( ) {
$ ( 'P' ) . aggiungere ( ' Stringa aggiunta .' ) ;
} ) ;
$ ( '#btn2' ) . clic ( funzione ( ) {
$ ( 'ol' ) . aggiungere ( '
} ) ;
} ) ;
copione >
Testa >
Nelle righe di codice sopra:
- Innanzitutto, specifica il jQuery ' CDN ” percorso dal suo sito ufficiale “ https://jquery.com/ ” con l'aiuto del “ src 'attributo.
- Quindi, aggiungi una piccola sezione di script che utilizza prima il ' pronto ()' metodo per richiamare il ' funzione ()' quando viene caricato il documento HTML.
- Dopodiché il “ clic ()' esegue la funzione collegata al pulsante il cui id è ' btn1 ” al clic del pulsante.
- Nella definizione della funzione, il ' aggiungere ()' viene utilizzato per aggiungere l'elemento di paragrafo mirato con la stringa indicata.
- Lo stesso processo viene eseguito per l'aggiunta ' lista ordinata ” ovvero, oggetto Node per aggiungerlo all'elemento specificato.
Produzione
Qui, è confermato che entrambi gli oggetti 'String' e 'Node' vengono aggiunti con l'aiuto del metodo 'append()'.
Codice JavaScript del metodo 'appendChild()'.
Ora, guarda praticamente il metodo JavaScript 'appendChild ()':
< copione >funzione myFunc1 ( ) {
per. appendChild ( '
Stringa aggiunta
' ) //Aggiungi stringa DOM} funzione myFunc2 ( ) {
cost elemento = documento. createElement ( 'Quello' ) ;
cost nodo = documento. createTextNode ( 'Elemento aggiunto' ) ;
elemento. appendChild ( nodo ) ; //Aggiungi nodo DOM
cost elemento = documento. getElementById ( 'elenco' ) ;
elemento. appendChild ( elemento ) ;
}
copione >
Nello snippet di codice sopra:
- Definire un nome di funzione ' myFunc1 ()” che usa il metodo “appendChild()” per accodare il paragrafo aggiunto con la stringa data.
- Successivamente, nel “ myFunc2 ()', il metodo 'createElement()' crea un nuovo elemento della lista e poi vi aggiunge del testo usando il metodo 'createTextNode()'.
- Successivamente, aggiungi il nodo dell'elenco creato con il suo testo utilizzando il metodo 'appendChild ()'.
- Infine, aggiungi il nodo elenco appena creato all'elenco ordinato a cui si accede il cui ID è 'elenco' con l'aiuto del metodo 'appendChild ()'.
Produzione
Come visto, solo l'oggetto 'Nodo' viene aggiunto al clic del pulsante, non la 'Stringa'.
Errore
Premi 'F12' per aprire la console web e ispezionare il problema:
Come visto, la console mostra un errore nell'accodare l'oggetto String usando il metodo “appendChild()”. Quindi, è confermato che il metodo “appendChild()” non accoda un oggetto String.
Differenza 2: applicazione dei metodi jQuery append() e JavaScript appendChild() su più oggetti nodo
La seconda differenza tra i metodi 'append()' e 'appendChild()' può essere analizzata eseguendo questi metodi su più oggetti nodo. Per vedere la sua implementazione pratica, seguire i codici forniti.
Codice HTML
Esaminiamo il codice HTML:
< div id = 'div-principale' >< div stile = 'display:flex; justify-content:center; align-items:center; width:50px; height:50px; background:orangeed; margin:10px; text-align:center;' > Uno < / div >
< div stile = 'display:flex; justify-content:center; align-items:center; width:50px; height:50px; background:orangeed; margin:10px; text-align:center;' > Due < / div >
< div stile = 'display:flex; justify-content:center; align-items:center; width:50px; height:50px; background:orangeed; margin:10px; text-align:center;' > Tre < / div >
< / div >
Qui, le righe di codice sopra contengono un elemento principale '
Nota : Il codice HTML sopra scritto è seguito nella seconda differenza di entrambi i metodi “append()” e “appendChild()”.
metodo append()
Ora, procedi con il seguente script:
< copione >cost maindiv = documento. getElementById ( 'div-principale' ) ;
cost div4 = documento. createElement ( 'div' ) ;
div4. innerHTML = 'Quattro' ;
div4. stile . colore di sfondo = 'rosa' ;
div4. classList . aggiungere ( 'div' ) ; cost div5 = documento. createElement ( 'div' ) ;
div5. innerHTML = 'Cinque' ;
div5. stile . colore di sfondo = 'rosa' ;
div5. classList . aggiungere ( 'div' ) ;
maindiv. aggiungere ( div4 , div5 ) ;
copione >
Nello snippet di codice sopra:
- La variabile 'maindiv' accede al 'div' aggiunto utilizzando il suo id 'main-div' con l'aiuto del metodo 'getElementById()'.
- Successivamente, il metodo 'createElement()' crea un nuovo oggetto Node 'div', aggiunge il testo specificato utilizzando la proprietà 'innerHTML' e applica il colore di sfondo tramite la proprietà 'style.backgroundcolor'.
- Successivamente, il metodo 'add ()' aggiunge le proprietà CSS della classe specificata utilizzando la proprietà 'classList'.
- La stessa procedura viene seguita per il successivo elemento '' appena creato.
- Infine, entrambi gli oggetti Node appena creati vengono aggiunti contemporaneamente con l'aiuto del metodo 'append()'.
Produzione
Qui, gli oggetti Node multipli appena creati vengono aggiunti di conseguenza allo stesso elemento genitore.
Metodo 'appendChild()'.
Successivamente, continua con il metodo 'appendChild()':
< copione >
maindiv. appendChild ( div4 ) ;
maindiv. appendChild ( div5 ) ;
copione >Come visto, il metodo “appendChild()” aggiunge più oggetti Node uno per uno allo stesso elemento genitore.
Produzione
L'output è lo stesso del metodo 'append()' ma diverso nello specificare gli oggetti Node.
Differenza 3: valore restituito dei metodi jQuery append() e JavaScript appendChild() applicati
L'ultima differenza è il 'valore restituito' dei metodi 'append()' e 'appendChild()'. Vediamolo praticamente.
Nota : Il codice HTML è lo stesso della Differenza 2 (Oggetti Nodo Multiplo).
Metodo 'append()'.
Guarda le righe di codice fornite:
< copione >
consolare. tronco d'albero ( maindiv. aggiungere ( div4 ) ) ;
copione >Qui, viene applicato il metodo 'console.log()' per verificare il valore restituito dal metodo 'append()' durante l'aggiunta dell'oggetto Node specificato.
Produzione
Premi 'F12' per aprire la console web:
Come visto, il valore restituito dal metodo “append()” è “ non definito ”.
Metodo appendChild()
Ora, considera il seguente codice che utilizza il metodo 'appendChild()':
< copione >
consolare. tronco d'albero ( maindiv. appendChild ( div4 ) ) ;
copione >Specificare il metodo 'appendChild()' con il metodo 'console.log()' uguale al metodo 'append()'.
Produzione
In questo caso, l'output restituisce l'elemento HTML aggiunto, incluse le proprietà di stile.
Conclusione
Il jQuery ' aggiungere ()' e JavaScript ' appendChild ()” i metodi sono diversi in base alla loro “ sintassi', 'utilizzo' e 'più oggetti Node ”. Inoltre, il loro “ valori restituiti ” sono anche diversi l'uno dall'altro. Entrambi i metodi sono utili e il loro utilizzo dipende dalle scelte dell'utente. Questa guida ha elencato la differenza tra jQuery ' aggiungere ()' e JavaScript ' appendChild ()” praticamente.