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 国际」许可协议进行许可。
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· DeepSeek “源神”启动!「GitHub 热点速览」
· 微软正式发布.NET 10 Preview 1:开启下一代开发框架新篇章
· 我与微信审核的“相爱相杀”看个人小程序副业
· C# 集成 DeepSeek 模型实现 AI 私有化(本地部署与 API 调用教程)
· spring官宣接入deepseek,真的太香了~