jquery .HTML VS .ajouter

jquery .HTML VS .ajouter
"jquery«Est une bibliothèque JavaScript et«.html ()" et ".ajouter()"Les deux sont les méthodes utilisées dans jQuery. Les deux méthodes effectuent des tâches différentes dans une fonction javascript. Le ".La méthode html () »est utilisée pour remplacer complètement le contenu sur une interface de page Web. D'un autre côté, le «.La méthode A SPEND () »est utilisée pour ajouter de nouveaux contenus à la fin du contenu existant tout en ne modifiant pas le contenu précédent contrairement au«.Méthode html () ”.

C'est ainsi ".html () »et«.Les méthodes A SPEND () »sont différentes les unes des autres et effectuent différentes opérations JavaScript. Comprenons pratiquement la différence entre les deux avec l'aide d'exemples.

Comment utiliser le «.Méthode html () ”?

Il devrait y avoir un code HTML pour formater d'abord le document:

C'est la première ligne


C'est la deuxième ligne


  • Dans l'extrait de code ci-dessus, il y a deux classes nommées Demo à l'intérieur des balises de paragraphe pour ajouter du contenu dans la page Web et ci-dessous qu'il existe un bouton nommé Changer de contenu qui sera utilisé pour modifier le contenu via la méthode HTML ().

Il devrait y avoir une fonction JavaScript pour implémenter le «.html ()»Méthode pour le corps du document ci-dessus. Voici un exemple de la façon dont le «.html ()«La méthode est implémentée dans JavaScript:

$ (document).Ready (function ()

$ ("bouton").cliquez sur (fonction ()
$ (".démo ").html ("Ceci est le nouveau texte");
);
);
  • Dans la fonction imbriquée javascript ci-dessus, il existe une fonction qui a la méthode prêt, de sorte que, lorsque l'interface HTML se charge sur la page Web, cette fonction devient active.
  • À l'intérieur de la fonction, il y a le «.Cliquez sur"Méthode pour appeler cette fonction avec l'élément"bouton".
  • À l'intérieur, il y a le contenu écrit avec «.html". Cela signifie que lorsque l'utilisateur clique sur le «Changer de contenu«Bouton, il invoquera le«.html ()«Méthode, et ce contenu (« Ceci est le nouveau texte ») écrit dans le«.html ()»La méthode remplacera l'ancien contenu.

L'interface de sortie générée via le code ci-dessus sera la suivante:

C'est ainsi que le «.html ()»La méthode fonctionne sur une interface de page Web.

Comment utiliser le «.Méthode annexée () »?

Maintenant, voyons comment le «.ajouter()«La méthode est différente et comment elle fonctionne sur la page Web. Le ".ajouter()«La méthode peut ajouter du contenu après le contenu existant sur le côté droit du contenu et également en dessous du contenu. Nous pouvons donc ajouter des boutons pour les deux opérations:

Bonjour le monde!



  1. Première ligne

  2. Deuxième ligne

  3. Troisième ligne



  • Dans l'extrait de code ci-dessus, il y a trois lignes ajoutées à afficher sur l'interface de la page Web en tant que contenu existant de la page Web.
  • Et puis, il y a deux boutons, l'un pour ajouter le texte (pour étendre le contenu sur le côté droit du texte), et l'autre pour ajouter la liste (pour ajouter du contenu sous le contenu existant).

Pour créer la fonction JavaScript pour l'extrait de code ci-dessus, il devrait y avoir le «.ajouter()”Méthode pour le"Texte d'ajout" et "Listes d'ajout" boutons:

$ (document).ready (function ()
$ ("# Button1").cliquez sur (fonction ()
$ ("# a").ajouter(" Texte d'ajout");
);
$ ("# Button2").cliquez sur (fonction ()
$ ("ol").ajouter("
  • Listes d'ajout
  • ");
    );
    );
    • Dans l'extrait de code ci-dessus, il existe une fonction qui reçoit la méthode prête à invoquer la fonction lorsque la page Web est chargée.
    • À l'intérieur de la fonction, le «.ajouter()«La méthode est utilisée pour le« «Button1" et "Button2" éléments.

    Cela générera la sortie suivante:

    C'était la différence entre le «.html ()" et ".ajouter()»Méthodes de jQuery.

    Conclusion

    Le ".html ()" et ".ajouter()"Les deux sont des méthodes utilisées dans"jquery". Quand le "html ()"La méthode est utilisée, il remplace l'ancien contenu par le nouveau contenu qui est ajouté dans le"html ()" méthode. D'un autre côté, quand le «ajouter()«La méthode est utilisée, il ajoute du contenu après le contenu existant sans modifier ou supprimer l'ancien contenu.