JavaScript Ajout des données à Div

Tout en maintenant une page Web ou un site Web, il y a des situations où il y a une exigence de mise à jour de temps à autre. Dans un tel cas, il est nécessaire d'ajouter certaines données sur une entrée particulière des utilisateurs pour créer et entretenir les enregistrements. En plus de cela, l'ajout de données à DIV est également d'une grande aide à l'intégration de HTML à JavaScript pour appliquer des fonctionnalités ajoutées.

Comment ajouter les données à Div dans JavaScript?

Les approches suivantes peuvent être utilisées pour ajouter des données à Div en JavaScript:

• "innerhtml" propriété.
• "insertadjacenthtml ()" méthode.
• "APPENDCHILD ()" méthode.
• "jquery" approche.

Approche 1: Ajoutez les données à Div en JavaScript en utilisant la propriété InnerHTML

Le "innerhtml»La propriété renvoie le contenu HTML intérieur de l'élément.Cette approche peut être appliquée pour ajouter les données à l'image et au bouton inclus dans le "div»Élément sur le bouton cliquer.

Syntaxe

élément.innerhtml

Dans la syntaxe donnée:

• "élément»Fait référence à l'élément dans lequel le contenu HTML sera retourné.

Exemple

Jetons un coup d'œil aux lignes de code suivantes:

Cliquez pour ajouter les données

Dans le code ci-dessus:

• Spécifie le "div"Elément avec le spécifié"identifiant".
• Après cela, incluez une image dans l'élément div.
• Créez également un bouton dans l'élément div ayant un joint «sur clic»Redirection des événements vers la fonction appendData ().

Passez à la partie javascript du code:

Dans la partie JS du code, suivez les étapes indiquées ci-dessous:

• Déclarer une fonction nommée «APPENDDATA ()".
• Dans sa définition, accédez au «div”Élément de son identifiant en utilisant le"document.getElementByid ()" méthode.
• Enfin, appliquez le «innerhtml”Propriété pour ajouter le message déclaré avec l'image incluse et le bouton créé dans le"div".

Sortir

On peut observer dans la sortie ci-dessus que le message indiqué est ajouté avec l'image sur le bouton cliquer.

Approche 2: Ajouter les données à Div en JavaScript en utilisant la méthode insertadjacenthtml ()

Le "insertadjacenthtml ()»La méthode insère des données HTML dans la position spécifiée.Cette méthode peut être utilisée pour ajouter les données à la fin du «div"Lors de la sélection d'une option spécifique.

Syntaxe

élément.insertadjacenthtml (position, html)

Dans la syntaxe ci-dessus:

• "position»Fait référence à la position par rapport à l'élément.
• "html»Porte le HTML à insérer.

Exemple

Jetez un œil à l'extrait de code suivant:

JavaScript est-il un langage de programmation?

Oui
Non

Dans le code HTML ci-dessus:

• Répétez les étapes discutées pour inclure le «div"Élément ayant le spécifié"identifiant".
• Incluez également la rubrique spécifiée dans le «

  " étiqueter.

• Après cela, incluez deux «radio»Boutons avec un invoquant la fonction appendData (). Cela entraînera une apprentissage des données uniquement lors de la sélection de l'option "Oui".

Passez à la partie javascript du code:

Dans le code JS ci-dessus, suivez ces étapes:

• Déclarer une fonction nommée «APPENDDATA ()".
• Dans sa définition, accédez au «div”Element également en utilisant le"document.getElementByid ()" méthode.
• Enfin, appliquez le «insertadjacenthtml ()»Méthode en spécifiant le«position«Comme premier paramètre pour ajouter les données spécifiées. Dans ce scénario, les données seront ajoutées à la fin.

Sortir

Dans la sortie ci-dessus, il est évident que le «succès"Le message est annexé uniquement en cliquant sur l'option"Oui".

Approche 3: Ajouter les données à Div en JavaScript à l'aide de la méthode APPEDCHILD ()

Le "APPENDCHILD ()»La méthode ajoute un élément de nœud comme dernier enfant de l'élément. Cette approche peut être utilisée pour ajouter les données de la même manière à la fin sur le bouton cliquer.

Syntaxe

élément.Annexe (nœud)

Dans la syntaxe donnée:

• "nœud»Indique le nœud à ajouter.

Remarque latérale: Une méthode supplémentaire "CreateTextNode ()»Sera également appliqué dans l'exemple ci-dessous. Il est simplement appliqué pour créer un nœud de texte.

Exemple

Suivons l'exemple ci-dessous ci-dessous étape par étape:

Javascrip

Cliquez pour ajouter les données

Dans le code HTML ci-dessus:

• Rappelez-vous les approches discutées pour inclure le «div"Élément ayant le spécifié"identifiant"Et un titre.
• De même, incluez un bouton avec le "sur clic”Événement joint qui redirigera vers la fonction appendData ().

Suivons la partie JavaScript indiquée du code:

Dans cette partie du code, effectuez les étapes suivantes:

• Définissez une fonction nommée «APPENDDATA ()".
• Dans sa définition, de même, accédez au «div”Élément comme discuté.
• Dans l'étape suivante, appliquez le «CreateTextNode ()”Méthode pour créer le nœud de texte spécifié.
• Enfin, ajoutez le nœud de texte créé à la fin du «div".

Sortir

Dans la sortie, il est évident que le paragraphe résultant est annexé au «div"Sur le bouton cliquez.

Approche 4: Ajouter les données à Div en JavaScript en utilisant l'approche jQuery

Le "jquery«Une approche peut être utilisée pour accéder à la«div»Élément directement et ajoutez une rubrique dedans (div) sur le bouton cliquer.

Exemple

Suivons l'exemple ci-dessous ci-dessous étape par étape:

Le contenu de ce site est:

Cliquez pour ajouter les données

Dans le code ci-dessus, suivez les étapes indiquées ci-dessous:

• Incluez la bibliothèque jQuery pour appliquer ses méthodes.
• Ravive les étapes pour spécifier le «div"Elément avec le spécifié"identifiant".
• Dans le «div», Incluez le titre déclaré et un«bouton" avec un "sur clic”Événement invoquant la fonction appendData ().

Continuons à la partie javascript du code:

Dans la partie JS ci-dessus du code, effectuez les étapes suivantes:

• Définissez une fonction nommée «APPENDDATA ()".
• Dans sa définition, accédez à l'élément div directement par son «identifiant".
• Après cela, appliquez le «ajouter()"Méthode à l'accès"div»Et incluez la rubrique indiquée dedans.

Sortir

Dans la sortie, le clic du bouton conduit à ajouter la rubrique résultante dans le "div".

Cet article a démontré les approches pour ajouter les données à Div dans JavaScript.

Conclusion

Le "innerhtml»Propriété, le«insertadjacenthtml ()"Méthode, le"APPENDCHILD ()«Méthode ou le«jquery»Une approche peut être utilisée pour ajouter les données à Div en JavaScript. La propriété InnerHTML peut être utilisée pour ajouter les données à l'image incluse et un bouton dans le "div»Élément sur le bouton cliquer. La méthode insertadjacenthtml () peut être appliquée pour ajouter les données par rapport à la position spécifiée comme paramètre. La méthode appenchild () en combinaison avec le «CreateTextNode ()«La méthode peut être utilisée pour créer d'abord un nœud de texte, puis l'ajouter à la fin de la div. L'approche jQuery peut être utilisée pour récupérer directement l'élément DIV et ajouter une rubrique sur le bouton cliquer. Ce blog a expliqué pour ajouter les données à Div dans JavaScript.