Différence entre val () et text ()

225

Quelle est la différence entre les fonctions de jQuery val()et text()?

Où utiliseriez-vous l'un sur l'autre?

javascript jquery html

— Dan Appleyard
source

— hbtpoprock

284

.val()fonctionne sur les éléments d'entrée (ou tout élément avec un attribut value?) et .text()ne fonctionnera pas sur les éléments d'entrée. .val()obtient la valeur de l'élément d'entrée - quel que soit son type. .text()obtient le innerText (pas HTML) de tous les éléments correspondants:

.text()

Le résultat est une chaîne qui contient le contenu textuel combiné de tous les éléments correspondants. Cette méthode fonctionne sur les documents HTML et XML. Ne peut pas être utilisé sur les éléments d'entrée. Pour le texte du champ de saisie, utilisez l'attribut val.

.val()

Récupère le contenu de l'attribut value du premier élément correspondant

— tvanfosson
source

3

chose drôle - prenez en compte qu'ils pourraient ne pas être égaux pourtextarea someTextArea.html() !== someTextArea.val()

— Maciej Jankowski

N'utilisez pas textarea.html («contenu») pour charger le contenu. J'ai chargé du contenu avec jQuery dynamic - la partie amusante était quand j'ai cliqué sur le bouton Enregistrer. Après cette action, le contenu de la zone de texte n'a plus changé. Avec la définition du contenu avec .val («contenu»), ce problème ne s'est pas produit. Impossible de comprendre pourquoi, mais je pense que cela a quelque chose à voir avec le cache DOM et le comportement différent de ces 2 méthodes.

— Erik Čerpnjak

25

text () retourne le contenu textuel combiné de tous les éléments correspondants (tels que p, div, etc.) val () est utilisé pour obtenir la valeur d'un élément d'entrée (tel que input, select, etc.)

selon la documentation officielle, le texte () ne doit pas être utilisé avec des éléments d'entrée

1

val () est utilisé pour récupérer la valeur de tous les types d'entrée html comme (case à cocher, texte, etc.), où l'utilisateur a une option pour entrer la valeur. Ex:-

<input type="text" id="txt_name" /> 
 <input type="checkbox" name="vehicle" value="Bike" id="chk_byk" class="ss">bike<br>   
<script type="text/javascript">
 $(document).ready(function () {

            $("#btn_submit").click(function () {
                alert($("#chk_byk").val());
            });

            });


    </script>

où as text () est utilisé pour récupérer la valeur des éléments html où l'utilisateur n'interagira pas comme (p, div, etc.)

    <p id="p1">Hi how are u??</p>
 <div id="dv5">Debendra</div>

 <script type="text/javascript">

        $(document).ready(function () {

            $("#btn_submit").click(function () {
                alert($("#dv5").text());
            });

            });


    </script>

— Debendra Dash
source

0

La fonction .val () renvoie la valeur de l'élément d'entrée et la fonction .text () renvoie la valeur à partir des éléments autres que les éléments d'entrée. Nous pouvons également passer l'argument chaîne à ces fonctions pour définir la valeur de l'élément appelant . Le code ci-dessous montre comment définir la valeur des éléments DOM à l'aide des fonctions .val () et .text ():

Partie HTML:

<form id="form1"><input id="first" type="text" /><input type="submit" /></form>
<div id="second">Click the "Submit Query" to see it work</div>

Partie Jquery:

$(document).on("submit", "form", function (e) {
    $("#first").val("This input is set by .val() function");
    $("#second").text("A new text is set using .text() function!");
    return false;
})

Démo: http://jsfiddle.net/urhys9zj/6/

— Himanshu Singh
source