Différence entre val () et text ()

Réponses:

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
la 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


la source
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
la 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
la source