什么时候使用。val()和。innerhtml ?

In JQuery when trying to access elements, I see that if I have a form (lets say a textarea), and I want to get the text inside of it, I must use $("textarea").val();

在JQuery中，当我尝试访问元素时，我看到如果我有一个表单(假设是一个textarea)，并且我想要得到其中的文本，我必须使用$(“textarea”).val();

Instead if I have a h1 element, I must use $("h")[0].innerHTML;

如果我有一个h1元素，我必须使用$(“h”)[0].innerHTML;

Why is this the case? h1.val()/textarea.innerHTML do not work

为什么会这样?h1.val()/文本区域。innerHTML不工作

5 个解决方案

#1

.val() is used to get/replace input elements values in jQuery, alternative in JS is .value.

.val()在jQuery中用于获取/替换输入元素值，JS中可选为.value。

innerHTML or jQuery's .html() is used to get/replace the whole markup inside an element, not input elements.

innerHTML或jQuery的.html()用于获取/替换元素中的整个标记，而不是输入元素。

text() is used almost the same as JS innertHTML, only it gets/replaces the text inside an element, not all the tags etc. It's bassically the equivalent of JS innerText

text()几乎与JS innertHTML使用相同，只是它获取/替换元素中的文本，而不是所有的标记等

Reference links about innerHTML, innerText, val(), text(), html()

关于innerHTML、innerText、val()、text()、html()的引用链接

#2

Because all the inputs in Html have val() and they can send their values to be processed by a form, such as textarea, text, submit, ...

因为Html中的所有输入都有val()，它们可以将它们的值发送给一个表单来处理，例如textarea, text, submit，……

but tags like h1, span, ... dont participate in form and wont be processed, and also they may have inner tags and html as well.

但是像h1, span，…不要参与表单，也不会被处理，它们也可能有内部标签和html。

#3

you could use h1.text() or h1.html() which map to innerText and innerHTML respectively.

可以使用h1.text()或h1.html()分别映射到innerText和innerHTML。

As for val() that maps to input.value.

至于val()，它映射到input.value。

Using the jquery equivalents gives you cross-browser compatibility, although that's probably more of a historic relic. New browsers probably implement these features the same way.

使用jquery等价物可以提供跨浏览器的兼容性，尽管这可能是历史遗留问题。新的浏览器可能以同样的方式实现这些特性。

As a general rule: value is used on input elements, innerHTML on non-input fields.

一般规则:值用于输入元素、非输入字段的innerHTML。

#4

textarea.innerHTML actually will work to get the html content of the textarea as it's initially rendered, whereas val() will get the current value based on user input. val() as others have stated only works on form elements so it would have no result for an <h1>.

文本区域。innerHTML实际上将在最初呈现时获取textarea的html内容，而val()将基于用户输入获得当前值。val()正如其他人所说，只对表单元素起作用，因此对于

没有结果。

$('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>

#5

.val() is used to get value from input elements in jQuery. Alternative in JavaScript is .value.

.val()用于从jQuery输入元素中获取值。JavaScript中的替代方法是.value。

.innerHTML is used to put some value between some tags. So innerHTML is a DOM property to insert content to a specified id of an element, and with .val() you just get value from some input tags.

. innerhtml用于在一些标记之间放置一些值。innerHTML是一个DOM属性，用于将内容插入到元素的指定id中，使用.val()，您只需从一些输入标记中获得值。