JavaScript est un langage de programmation polyvalent qui permet la création et la manipulation des mêmes éléments que HTML (Hyper Text Markup Language). Il suit les méthodes 'append()' et 'appendChild()' pour exécuter cette fonctionnalité. Comme leur nom l'indique, les deux méthodes ajoutent les éléments HTML comme les objets String ou Node. Cependant, ils diffèrent les uns des autres en fonction de leurs fonctionnalités et d'autres facteurs.
Ce guide souligne les principales différences entre le jQuery ' ajouter ()' et Javascript ' ajouterEnfant () ».
Avant de passer aux différences entre le jQuery ' ajouter ()' et Javascript ' ajouterEnfant () », examinez d'abord les bases de ces méthodes.
Qu'est-ce que la méthode jQuery append() ?
Le jQuery ' ajouter ()' insère les objets 'Node' et 'String' souhaités à la fin en tant que dernier enfant de l'élément parent.
Syntaxe
$ ( sélecteur ) . ajouter ( contenu , fonction ( indice , html ) )Dans la syntaxe ci-dessus :
- contenu : Il fait référence aux éléments HTML, aux éléments DOM ou aux objets jQuery.
- fonction : Il s'agit d'un paramètre supplémentaire qui spécifie la fonction JavaScript définie par l'utilisateur ayant les paramètres « index (position de l'élément) » et « html (html des éléments sélectionnés) ».
Qu'est-ce que la méthode JavaScript appendChild() ?
La méthode 'appendChild()' ajoute uniquement l'objet 'Node' après le dernier enfant de l'élément parent. Il crée d'abord l'objet Node souhaité à l'aide de la méthode 'createElement ()', puis l'ajoute.
Syntaxe
élément. ajouterEnfant ( nœud )Cette syntaxe ne nécessite qu'un seul paramètre, c'est-à-dire ' nœud ”.
Comme leurs noms l'indiquent, les méthodes décrites ci-dessus sont différentes les unes des autres. Cette section présente certains facteurs sur lesquels ils sont différents. Jetons un coup d'œil à eux.
Différences entre les méthodes jQuery append() et JavaScript appendChild()
| Conditions | jQuery ajoute() | JavaScript appendChild() |
|---|---|---|
| Usage | Il peut être utilisé pour ajouter l'élément parent en ajoutant un nouveau ' Nœud ' et ' Chaîne » objets en même temps. | Il ne peut être utilisé que pour ajouter l'élément parent par le nouveau ' Nœud ' créé à l'aide de ' créerÉlément ()' méthode. |
| Objets nœuds multiples | Le ' ajouter ()' peut ajouter plusieurs objets Node dans son élément parent associé en même temps dans le format suivant. Format : 'div.append(firstchild, secondchild, 'Linuxhint');' |
Le ' ajouterEnfant ()' fonctionne bien avec plusieurs objets Node mais elle n'ajoute que le premier enfant à la fois, puis le suivant. Format : 'div.appendChild(firstchild, secondchild, 'Linuxhint');' |
| Valeur de retour | Le ' ajouter ()' ne renvoie pas l'objet Node ajouté car il affiche une valeur renvoyée 'indéfinie', c'est-à-dire Format : console.log(appendChildValue) // non défini |
D'autre part, le « ajouterEnfant () » renvoie une valeur contenant l'objet Node ajouté. Format : console.log(appendChildValue) //
|
Passez maintenant à la mise en œuvre pratique des principales différences répertoriées.
Différence 1 : Application des méthodes jQuery append() et JavaScript appendChild()
Selon la première différence, le « ajouter ()' ajoute à la fois Node et String tandis que la méthode 'appendChild()' ajoute uniquement les objets Node.
Code HTML
Tout d'abord, jetez un œil au code HTML indiqué :
< corps >< h2 > Méthode jQuery 'append()' < / h2 > //Pour ajouter() < h2 > Méthode jQuery 'appendChild()' < / h2 > //Pour ajouterEnfant()
< bouton identifiant = 'btn1' sur clic = 'maFonction1()' > Ajouter une chaîne DOM < / bouton >
< bouton identifiant = 'btn2' sur clic = 'maFonction2()' > Ajouter un nœud DOM < / bouton >
< p identifiant = 'pour' > Ceci est un paragraphe. < / p >
< ol identifiant = 'liste' >
< ce > Tutoriel JavaScript 1 < / ce >
< ce > Tutoriel JavaScript 2 < / ce >
< ce > Tutoriel JavaScript 3 < / ce >
< / ol >
< / corps >
Dans les lignes de code ci-dessus :
- La balise «
» définit le sous-titre du niveau 2.
- Les balises '
- La balise '
' crée un paragraphe vide avec un identifiant 'para' attribué pour afficher la valeur de chaîne ajoutée.
- La balise '
- ' ajoute une liste ordonnée avec un identifiant 'liste', et les éléments listés à l'aide des balises '
- '.
Note : Suivez le code HTML écrit ci-dessus dans la première différence des méthodes 'append()' et 'appendChild()'.
“append()” Méthode jQuery Code
Tout d'abord, aperçu du code jQuery de la méthode 'append()':
< diriger >< source de script = 'https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js' > scénario >
< scénario >
$ ( document ) . prêt ( fonction ( ) {
$ ( '#btn1' ) . Cliquez sur ( fonction ( ) {
$ ( 'p' ) . ajouter ( ' Chaîne ajoutée .' ) ;
} ) ;
$ ( '#btn2' ) . Cliquez sur ( fonction ( ) {
$ ( 'ol' ) . ajouter ( '
} ) ;
} ) ;
scénario >
diriger >
Dans les lignes de code ci-dessus :
- Tout d'abord, spécifiez le jQuery ' CDN « chemin depuis son site officiel » https://jquery.com/ ' avec l'aide du ' src ' attribut.
- Ensuite, ajoutez une petite section de script qui utilise d'abord le ' prêt ()' méthode pour invoquer le ' fonction ()' lorsque le document HTML est chargé.
- Après cela, le « Cliquez sur ()' exécute la fonction qui est liée au bouton dont l'id est ' btn1 ” lors du clic sur le bouton.
- Dans la définition de la fonction, le ' ajouter ()' est utilisée pour ajouter l'élément de paragraphe ciblé avec la chaîne indiquée.
- Le même processus est effectué pour le ' liste ordonnée ” c'est-à-dire l'objet Node pour l'ajouter à l'élément donné.
Sortir
Ici, il est confirmé que les objets 'String' et 'Node' sont ajoutés à l'aide de la méthode 'append()'.
Code JavaScript de la méthode 'appendChild()'
Maintenant, regardez la méthode JavaScript 'appendChild()' pratiquement :
< scénario >fonction maFonction1 ( ) {
pour. ajouterEnfant ( '
Chaîne ajoutée
' ) //Ajouter la chaîne DOM} fonction maFonction2 ( ) {
constante élément = document. créerÉlément ( 'ce' ) ;
constante nœud = document. createTextNode ( « Élément ajouté » ) ;
élément. ajouterEnfant ( nœud ) ; //Ajouter un nœud DOM
constante élément = document. getElementById ( 'liste' ) ;
élément. ajouterEnfant ( élément ) ;
}
scénario >
Dans l'extrait de code ci-dessus :
- Définir un nom de fonction ' maFonction1 ()' qui utilise la méthode 'appendChild()' pour ajouter le paragraphe ajouté avec la chaîne donnée.
- Ensuite, dans le ' maFonction2 ()', la méthode 'createElement()' crée un nouvel élément de liste, puis y ajoute du texte à l'aide de la méthode 'createTextNode()'.
- Après cela, ajoutez le nœud de liste créé avec son texte en utilisant la méthode 'appendChild()'.
- Enfin, ajoutez le nœud de liste nouvellement créé à la liste ordonnée consultée dont l'identifiant est 'list' à l'aide de la méthode 'appendChild ()'.
Sortir
Comme on le voit, seul l'objet 'Node' s'ajoute au clic sur le bouton, pas la 'String'.
Erreur
Appuyez sur 'F12' pour ouvrir la console Web et inspecter le problème :
Comme on le voit, la console affiche une erreur lors de l'ajout de l'objet String à l'aide de la méthode 'appendChild()'. Par conséquent, il est confirmé que la méthode 'appendChild()' n'ajoute pas d'objet String.
Différence 2 : Application des méthodes jQuery append() et JavaScript appendChild() sur plusieurs objets de nœud
La deuxième différence entre les méthodes 'append()' et 'appendChild()' peut être analysée en exécutant ces méthodes sur plusieurs objets nœuds. Pour voir sa mise en œuvre pratique, suivez les codes donnés.
Code HTML
Passons en revue le code HTML :
< div identifiant = 'div principal' >< div style = 'affichage : flex ; justification du contenu : centre ; alignement des éléments : centre ; largeur : 50 pixels ; hauteur : 50 pixels ; arrière-plan : rouge orange ; marge : 10 pixels ; alignement du texte : centre ;' > Un < / div >
< div style = 'affichage : flex ; justification du contenu : centre ; alignement des éléments : centre ; largeur : 50 pixels ; hauteur : 50 pixels ; arrière-plan : rouge orange ; marge : 10 pixels ; alignement du texte : centre ;' > Deux < / div >
< div style = 'affichage : flex ; justification du contenu : centre ; alignement des éléments : centre ; largeur : 50 pixels ; hauteur : 50 pixels ; arrière-plan : rouge orange ; marge : 10 pixels ; alignement du texte : centre ;' > Trois < / div >
< / div >
Ici, les lignes de code ci-dessus contiennent un élément principal '
Note : Le code HTML écrit ci-dessus est suivi dans la seconde différence des méthodes 'append()' et 'appendChild()'.
append() Méthode
Maintenant, continuez avec le script suivant :
< scénario >constante maindiv = document. getElementById ( 'div principal' ) ;
constante div4 = document. créerÉlément ( 'div' ) ;
div4. innerHTML = 'Quatre' ;
div4. style . Couleur de l'arrière plan = 'rose' ;
div4. classList . ajouter ( 'div' ) ; constante div5 = document. créerÉlément ( 'div' ) ;
div5. innerHTML = 'Cinq' ;
div5. style . Couleur de l'arrière plan = 'rose' ;
div5. classList . ajouter ( 'div' ) ;
maindiv. ajouter ( div4 , div5 ) ;
scénario >
Dans l'extrait de code ci-dessus :
- La variable 'maindiv' accède à la 'div' ajoutée en utilisant son identifiant 'main-div' à l'aide de la méthode 'getElementById()'.
- Ensuite, la méthode 'createElement()' crée un nouvel objet Node 'div', ajoute le texte spécifié à l'aide de la propriété 'innerHTML' et applique la couleur d'arrière-plan via la propriété 'style.backgroundcolor'.
- Après cela, la méthode 'add ()' lui ajoute les propriétés CSS de la classe spécifiée à l'aide de la propriété 'classList'.
- La même procédure est suivie pour le prochain élément '' nouvellement créé.
- Enfin, les deux objets Node nouvellement créés sont ajoutés en même temps à l'aide de la méthode 'append ()'.
Sortir
Ici, les multiples objets Node nouvellement créés sont ajoutés au même élément parent en conséquence.
Méthode 'appendChild()'
Ensuite, continuez avec la méthode 'appendChild()':
< scénario >
maindiv. ajouterEnfant ( div4 ) ;
maindiv. ajouterEnfant ( div5 ) ;
scénario >Comme on le voit, la méthode 'appendChild()' ajoute plusieurs objets Node un par un au même élément parent.
Sortir
La sortie est la même que la méthode 'append()' mais différente dans la spécification des objets Node.
Différence 3 : Valeur de retour des méthodes jQuery append() et JavaScript appendChild() appliquées
La dernière différence est la 'valeur renvoyée' des méthodes 'append()' et 'appendChild()'. Voyons cela concrètement.
Note : Le code HTML est le même que la différence 2 (objets nœuds multiples).
Méthode 'append()'
Regardez les lignes de code données :
< scénario >
console. enregistrer ( maindiv. ajouter ( div4 ) ) ;
scénario >Ici, la méthode 'console.log()' est appliquée pour vérifier la valeur renvoyée de la méthode 'append()' lors de l'ajout de l'objet Node spécifié.
Sortir
Appuyez sur 'F12' pour ouvrir la console Web :
Comme on le voit, la valeur renvoyée par la méthode 'append()' est ' indéfini ”.
appendChild() Méthode
Considérons maintenant le code suivant utilisant la méthode 'appendChild()':
< scénario >
console. enregistrer ( maindiv. ajouterEnfant ( div4 ) ) ;
scénario >Spécifiez la méthode 'appendChild()' avec la méthode 'console.log()' identique à la méthode 'append()'.
Sortir
Ici, la sortie renvoie l'élément HTML ajouté, y compris les propriétés de style à la place.
Conclusion
Le jQuery ' ajouter ()' et le JavaScript ' ajouterEnfant ()' les méthodes sont différentes sur la base de leur ' syntaxes », « utilisation » et « plusieurs objets Node ”. De plus, leur « valeurs renvoyées ' sont également différents les uns des autres. Les deux méthodes sont utiles et leur utilisation dépend des choix de l'utilisateur. Ce guide énumérait la différence entre le jQuery ' ajouter ()' et le JavaScript ' ajouterEnfant ()' méthode pratiquement.