Diferencia entre val () y text ()

Respuestas:

284

.val()funciona en elementos de entrada (o cualquier elemento con un atributo de valor?) y .text()no funcionará en elementos de entrada. .val()obtiene el valor del elemento de entrada, independientemente del tipo. .text()obtiene el texto interno (no HTML) de todos los elementos coincidentes:

.text()

El resultado es una cadena que contiene el contenido de texto combinado de todos los elementos coincidentes. Este método funciona en documentos HTML y XML. No se puede usar en elementos de entrada. Para el texto del campo de entrada, use el atributo val.

.val()

Obtenga el contenido del atributo de valor del primer elemento coincidente

tvanfosson
fuente
3
cosa graciosa - tenga en cuenta que podrían no ser iguales paratextarea someTextArea.html() !== someTextArea.val()
Maciej Jankowski
No use textarea.html ('contenido') para cargar contenido. Cargué algo de contenido con jQuery dynamic; la parte divertida fue cuando hice clic en el botón Guardar. Después de esa acción, el contenido en el área de texto ya no cambió. Con la configuración de contenido con .val ('contenido') este problema no apareció. No puedo entender por qué, pero creo que tiene algo que ver con el almacenamiento en caché DOM y el comportamiento diferente de estos 2 métodos.
Erik Čerpnjak 01 de
25

text () devuelve el contenido de texto combinado de todos los elementos coincidentes (como p, div, etc.) val () se usa para obtener el valor de un elemento de entrada (como input, select, etc.)

de acuerdo con el texto de la documentación oficial () no debe usarse con elementos de entrada


fuente
1

val () se usa para recuperar el valor de todos los tipos de entrada html como (casilla de verificación, texto, etc.), donde el usuario tiene una opción para ingresar el valor. 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>

donde as text () se usa para obtener valor de los elementos html donde el usuario no interactuará como (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
fuente
0

La función .val () devuelve un valor del elemento de entrada y la función .text () devuelve un valor distinto de los elementos de entrada. También podemos pasar argumentos de cadena a estas funciones para establecer el valor del elemento que llama . El siguiente código muestra cómo establecer el valor de los elementos DOM utilizando las funciones .val () y .text ():

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

Parte de 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;
})

Demostración: http://jsfiddle.net/urhys9zj/6/

Himanshu Singh
fuente