Когда я использую .val() vs .innerHTML?

Question

В JQuery при попытке элементов доступа, я вижу, что если у меня есть форма (позволяет сказать textarea), и я хочу, чтобы получить text внутри него, я должен использовать $("textarea").val();

Вместо если у меня есть h1 элемент, я должен использовать $("h")[0].innerHTML;

Почему это так? h1.val()/textarea.innerHTML do not work

Answer 1

.val() используется для ввода/замены значений входных элементов в jQuery, альтернатива в JS - .value.

innerHTML или jQuery's .html() используется для получения/замены всей разметки внутри элемента, а не элементов ввода.

text() используется почти так же, как JS innertHTML, только он получает/заменяет текст внутри элемента, а не все теги и т.д. Это bassically эквивалент JS innerText

Справочные ссылки о innerHTML, innerText, val(), text(), html()

Answer 2

можно использовать h1.text() или h1.html(), которые отображаются на innerText и innerHTML соответственно.

Что касается val(), который соответствует input.value.

Использование эквивалентов jquery дает вам совместимость между браузерами, хотя, вероятно, это скорее историческая реликвия. Новые браузеры, вероятно, реализуют эти функции одинаково.

Как правило: value используется для входных элементов, innerHTML для полей без ввода.

Answer 3

Поскольку все входы в Html имеют Вэла(), и они могут отправить их значения должны быть обработаны в форме, например, текстовое поле, текст, представить ...

, но тег, как h1, пролет,. .. не участвуют в форме и не будут обрабатываться, а также могут иметь внутренние теги и html.

Answer 4

.val() используется для получения значения из входных элементов в jQuery. Альтернатива в JavaScript - .value.

.innerHTML используется, чтобы поместить некоторое значение между некоторыми тегами. Таким образом, innerHTML является свойством DOM для вставки содержимого в указанный идентификатор элемента, а с .val() вы просто получаете значение из некоторых входных тегов.

Answer 5

textarea.innerHTML фактически будет работы, чтобы получить содержимое HTML в текстовом поле, как это первоначально вынесено, тогда как val() будет получить текущее значение, основанное на вводе пользователя. val(), поскольку другие заявили, что работают только на элементах формы, поэтому для <h1> результатов не было бы.

$('textarea').on('input', function() { 
 
    $('#innerhtml').text(this.innerHTML); 
 
    $('#val').text($(this).val()); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
Type in the textarea below to see results: 
 
<br> 
 
<textarea>test123</textarea> 
 
<div>textarea innerHTML:</div> 
 
<div id="innerhtml"></div> 
 
<div>textarea val:</div> 
 
<div id="val"></div>