Разница между val () и text ()

Ответы:

284

.val()работает с элементами ввода (или любым элементом с атрибутом value?) и .text()не будет работать с элементами ввода. .val()получает значение элемента ввода - независимо от типа. .text()получает innerText (не HTML) всех соответствующих элементов:

.text()

Результатом является строка, которая содержит объединенное текстовое содержимое всех соответствующих элементов. Этот метод работает как с HTML, так и с XML документами. Не может использоваться на элементах ввода. Для ввода текста поля используйте атрибут val.

.val()

Получить содержимое атрибута value первого соответствующего элемента

tvanfosson
источник
3
Забавная вещь - учтите, что они могут быть не равныtextarea someTextArea.html() !== someTextArea.val()
Мацей Янковский
Не используйте textarea.html ('content') для загрузки контента. Я загрузил некоторый контент динамическим jQuery - забавная часть была, когда я нажимал кнопку сохранения. После этого действия содержание в текстовой области больше не менялось. С настройкой содержимого с помощью .val ('content') эта проблема не появилась. Не могу понять почему, но я думаю, что это как-то связано с кэшированием DOM и различным поведением этих двух методов.
Эрик Черпняк
25

text () возвращает объединенное текстовое содержимое всех соответствующих элементов (таких как p, div и т. д.). val () используется для получения значения элемента ввода (например, input, select и т. д.)

в соответствии с официальной документацией текст () не должен использоваться с элементами ввода


источник
1

val () используется для извлечения значения из всех типов ввода html, таких как (флажок, текст и т. д.), где у пользователя есть возможность ввести значение. Пример: -

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

где as text () используется для получения значения из HTML-элементов, где пользователь не будет взаимодействовать как (p, div и т. д.) 

    <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>
Дебендра Дэш
источник
0

Функция .val () возвращает значение из элемента input, а функция .text () возвращает значение из элементов, отличных от input. Мы также можем передать строковый аргумент этим функциям, чтобы установить значение вызывающего элемента . Код ниже показывает, как установить значение для элементов DOM с помощью функций .val () и .text ():

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>

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

Демо: http://jsfiddle.net/urhys9zj/6/

Химаншу Сингх
источник