我什么时候使用 .val() 和 .innerHTML？答案

【问题标题】：When do I use .val() vs .innerHTML?我什么时候使用 .val() 和 .innerHTML？
【发布时间】：2023-03-08 01:52:01
【问题描述】：

在 JQuery 中尝试访问元素时，我看到如果我有一个表单（比如说 textarea），并且我想在其中获取 text，我必须使用 $("textarea").val();

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

为什么会这样？ h1.val()/textarea.innerHTML do not work

【问题讨论】：

只有表单控件元素有value属性，大部分其他元素有innerHTML。 innerHTML 有一个 jQuery 版本，$("h1").html()。

标签： javascript jquery html css

【解决方案1】：

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

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

text() 的使用几乎与 JS innertHTML 相同，只是它获取/替换元素内的文本，而不是所有标签等。它基本上相当于 JS innerText

关于innerHTML、innerText、val()、text()的参考链接， html()

【讨论】：

【解决方案2】：

textarea.innerHTML 实际上将工作以获取最初呈现的 textarea 的 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>

【讨论】：

很好的答案.. 只是一个关于你的代码的问题，on 函数有什么作用？以及您如何不断更新它？
jQuery on() 将事件处理程序附加到一个元素，input 是 <input> 和 <textarea> 字段的标准 DOM 事件：developer.mozilla.org/en-US/docs/Web/Events/input

【解决方案3】：

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

但是像h1、span、...这样的标签不参与表单，不会被处理，而且它们也可能有内部标签和html。

【讨论】：

【解决方案4】：

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

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

使用 jquery 等效项可为您提供跨浏览器兼容性，尽管这可能更像是一个历史遗迹。新浏览器可能以相同的方式实现这些功能。

作为一般规则：value 用于输入元素，innerHTML 用于非输入字段。

【讨论】：

这并不能解释为什么你需要使用.val。
是 .text / .html 函数吗？我尝试在控制台中使用它们，但它说它们不是
console.log($("h1").text()); 有效，但 console.log($("h1")[0].text()); 无效
@ksplitx：正确。 jquery 函数text() 等作用于 jquery 元素。（在这种情况下为$("h1")）。在执行$("h1")[0] 时，您引用了 jquery-element 引用的第一个底层 domElement。您可以双向使用，但是 jquery 在裸 dom 元素之上添加了一个抽象层，以使您更轻松。如果你真的想要，你仍然可以使用$("h1")[0].xyz
您可以执行$("h1").html()，这与执行$("h1")[0].innerHTML 相同。第一个选项只是第二个的快捷方式，IFF $("h1") 只选择一个元素。

【解决方案5】：

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

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

【讨论】：