JavaScript中val()、html()、text()区别

区别#

在前端开发中,val()、html()、text()三个方法都是用来获取或设置元素的内容。它们的区别在于:

  • val() 方法用于获取或设置表单元素的 value 属性的值。
  • html() 方法用于获取或设置元素的 HTML 内容,包括标签和文本。
  • text() 方法用于获取或设置元素的纯文本内容,不包括标签。

事例#

<input type="text" id="input1" value="这是一个输入框">
<div id="div1">这是一个div标签</div>
// 获取 input 元素的 value 值
const value = $("#input1").val();
console.log(value); // "这是一个输入框"

// 设置 input 元素的 value 值
$("#input1").val("这是新的值");

// 获取 div 元素的文本内容
const text = $("#div1").text();
console.log(text); // "这是一个div标签"

// 设置 div 元素的文本内容
$("#div1").text("这是新的文本");

注意事项

  • val() 和 html() 方法不能用于非表单元素,例如 div、span 等。
  • text() 方法可以用于任何元素,包括表单元素。
  • val() 和 html() 方法设置元素的内容时,如果内容中包含 HTML 标签,则会保留这些标签。
  • text() 方法设置元素的内容时,如果内容中包含 HTML 标签,则会将这些标签转换为纯文本。

总结#

val()、html()、text() 三个方法都是用来获取或设置元素的内容,但它们的用途和效果有所不同。在使用时,应根据具体情况选择合适的方法。

作者:hasome

出处:https://www.cnblogs.com/hasome/p/17915830.html

版权:本作品采用「署名-非商业性使用-相同方式共享 4.0 国际」许可协议进行许可。

posted @   hasome  阅读(297)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· DeepSeek “源神”启动!「GitHub 热点速览」
· 微软正式发布.NET 10 Preview 1:开启下一代开发框架新篇章
· 我与微信审核的“相爱相杀”看个人小程序副业
· C# 集成 DeepSeek 模型实现 AI 私有化(本地部署与 API 调用教程)
· spring官宣接入deepseek,真的太香了~
more_horiz
keyboard_arrow_up dark_mode palette
选择主题
menu
点击右上角即可分享
微信分享提示