Obtenez et définissez le texte intérieur des éléments HTML à jQuery

Manipulant Modèle de document d'objet (DOM) est l'une des principales caractéristiques de jQuery. JQuery comprend diverses méthodes liées à DOM qui font de l'obtention et de la définition du texte intérieur des éléments HTML une brise. html (), texte(), et val () sont des méthodes utiles qui relèvent de la catégorie spécifiée. Ces méthodes sont appelées Getters lorsqu'aucun argument n'est ajouté, et ils obtiennent le texte intérieur ou la valeur des éléments HTML. De plus, si vous avez ajouté une valeur comme argument, ces méthodes se comporteront comme des méthodes de setter.

Cet article discutera de la procédure de obtenir et Définir le texte intérieur de Éléments HTML dans jquery. De plus, les exemples liés aux méthodes html (), text () et val () pour obtenir et définir des éléments HTML. Alors, commençons!

Obtenez et définissez le texte intérieur des éléments HTML dans jQuery en utilisant la méthode html ()

La méthode javascript html () est utilisée pour obtenir et définir l'InnerHTML ou le contenu des éléments HTML à jQuery. Cette méthode renvoie le contenu du premier élément HTML correspondant si vous l'utilisez pour obtenir le texte intérieur; Lors de la définition du texte intérieur, il écrase le contenu de tous les éléments HTML qui sont assortis.

Syntaxe de la méthode html ()

Pour obtenir le texte intérieur des éléments HTML:

$ (sélecteur).html ()

Pour obtenir et définir le texte intérieur des éléments HTML:

$ (sélecteur).HTML (valeur)

Pour obtenir et définir le texte intérieur des éléments HTML en utilisant une fonction:

$ (sélecteur).HTML (fonction (index, currentValue))

Dans la syntaxe donnée ci-dessus, "valeur"Est le contenu que vous souhaitez ajouter comme texte intérieur modifié des éléments HTML,"indice"Est ajouté pour renvoyer la position d'index dans l'ensemble des éléments HTML, enfin,"valeur actuelle"Est ajouté pour récupérer le texte intérieur actuel d'un élément HTML spécifique.

Exemple: Obtenez et définissez le texte intérieur des éléments HTML dans jQuery () en utilisant la méthode html ()

Dans l'exemple donné ci-dessous, nous modifierons le texte intérieur de tous les paragraphes qui sont ajoutés comme éléments HTML avec le

étiqueter. Pour ce faire, nous rédigerons le code suivant dans notre «indice.html" déposer:

Changer le contenu des éléments P

C'est le premier paragraphe.

C'est le deuxième paragraphe.

Pour manipuler les éléments HTML à jQuery, nous devons écrire le code souhaité dans le corps du $ (document).prêt() Méthode, dans un fichier javascript. Ici, nous spécifierons que sur le «Cliquez sur«Événement de notre«bouton», L'interprète sélectionnera le tout«p»Éléments et définissez leur contenu sur la chaîne spécifiée dans le«html ()" méthode:

$ (document).ready (function ()
$ ("bouton").cliquez sur (fonction ()
$ ("p").html ("c'est linuxhint.com");
);
);

Après avoir enregistré le code fourni dans les deux fichiers, nous ouvrirons "indice.html"Avec l'aide de VS Code"Serveur de foie»:

Maintenant, nous cliquerons sur le "Changer le contenu des éléments P”Bouton qui est mis en surbrillance dans la sortie:

Cette action obtiendra tous les éléments de paragraphe HTML et définira leur texte intérieur comme suit:

Obtenez et définissez le texte intérieur des éléments HTML à l'aide de la méthode Text ()

Les méthodes text () et html () sont utilisées dans jQuery pour obtenir et définir le texte intérieur des éléments HTML. Cependant, lorsque vous utilisez le texte() Méthode pour obtenir du contenu des éléments HTML, il supprime le balisage HTML après avoir récupéré les éléments correspondants. Donc, si vous souhaitez obtenir du texte, définissez le texte et le balisage HTML des éléments à la fois, optez pour l'exécution de la méthode html (); Sinon, la méthode texte () vous a couvert.

Syntaxe de la méthode du texte ()

Pour obtenir le contenu des éléments HTML:

$ (sélecteur).texte()

Pour obtenir et définir le contenu des éléments HTML:

$ (sélecteur).Texte (valeur)

Pour obtenir et définir le contenu des éléments HTML en utilisant une fonction:

$ (sélecteur).texte (fonction (index, currentValue))

Ici, "valeur"Est le contenu que vous souhaitez définir comme texte d'éléments HTML,"indice"Est ajouté pour renvoyer la position d'index dans l'ensemble des éléments HTML, enfin,"valeur actuelle"Est ajouté pour récupérer le contenu actuel d'un élément HTML spécifique.

Exemple: Obtenez et définissez le texte intérieur des éléments HTML à l'aide de la méthode Text ()

Maintenant, nous exécuterons l'exemple donné précédent avec l'aide de «texte()«Méthode pour obtenir et définir le texte de tous«p”Éléments HTML. Voici le code que nous avons ajouté dans le "indice.html" déposer:

Changer le contenu des éléments P

C'est le premier paragraphe.

C'est le deuxième paragraphe.

Dans notre "mon projet.js«Fichier, nous invoquerons le«texte()»Méthode pour définir le texte intérieur de tous les éléments de paragraphe à«C'est Linuxhint.com»:

$ (document).ready (function ()
$ ("bouton").cliquez sur (fonction ()
$ ("p").Texte ("Ceci est Linuxhint.com ");
);
);

Cliquez sur le "Définir le contenu"Le bouton modifiera le texte des éléments de paragraphe ajoutés à"C'est Linuxhint.com»:

Obtenez et définissez le texte intérieur des éléments HTML dans jQuery en utilisant la méthode Val ()

Lorsque vous ajoutez des éléments de formulaire HTML dans votre application, vous pouvez utiliser le «val ()”Méthode pour obtenir et définir la valeur d'attribut des éléments HTML spécifiés. Il renvoie l'attribut du premier élément HTML correspondant lorsqu'il est invoqué pour obtenir une valeur et en cas de définition de la valeur d'attribut, il modifie la valeur d'attribut pour tous les éléments HTML correspondants.

Syntaxe de la méthode Val ()

Pour obtenir la valeur d'attribut des éléments HTML:

$ (sélecteur).val ()

Pour obtenir et définir la valeur d'attribut des éléments HTML:

$ (sélecteur).Val (valeur)

Pour obtenir et définir la valeur d'attribut des éléments HTML en utilisant une fonction:

$ (sélecteur).val (fonction (index, currentValue))

Dans la syntaxe donnée ci-dessus, "valeur«Est la valeur spécifiée que vous souhaitez modifier pour un attribut de l'élément HTML,«indice"Est ajouté pour renvoyer la position d'index dans l'ensemble des éléments HTML, enfin,"valeur actuelle"Est ajouté pour récupérer la valeur d'attribut actuelle de l'élément HTML sélectionné.

Exemple: Obtenez et définissez le texte intérieur des éléments HTML dans jQuery en utilisant la méthode Val ()

L'exemple de divagations ci-dessous modifiera la valeur d'attribut du «champ de saisie"Cela s'ajoute dans notre"indice.html" déposer:

Nom:

Définir la valeur

À cette fin, nous utiliserons le «mon projet.js»Fichier pour définir sa valeur sur«C'est Linuxhint.com"En utilisant la méthode Val ():

$ (document).ready (function ()
$ ("bouton").cliquez sur (fonction ()
$ ("entrée: texte").Val ("c'est Linuxhint.com ");
);
);

Nous cliquerons sur le «Définir la valeur"Bouton, et la chaîne"C'est Linuxhint.com»Sera défini dans le champ de saisie:

La sortie fournie ci-dessus déclare que nous avons réussi à définir la valeur du champ d'entrée ajouté.

Conclusion

Les HTML (), Text () et Val () sont les méthodes les plus utiles qui peuvent être utilisées pour obtenir et définir le texte intérieur des éléments HTML à JQuery. La méthode text () obtient et définit le contenu des éléments HTML alors que la méthode html () définit également son balisage HTML. Vous pouvez également invoquer la méthode HTML Val () pour modifier les valeurs d'attribut. Cet article a discuté des méthodes pour obtenir et définir le texte intérieur des éléments HTML à jQuery en fournissant des exemples appropriés.