Jquery中val、text、html的区别

jQuery操作DOM详解

最新推荐文章于 2025-09-12 16:56:45 发布

转载最新推荐文章于 2025-09-12 16:56:45 发布 · 70 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://my.oschina.net/liting/blog/548661

文章标签：

#javascript #ViewUI

本文详细介绍了如何使用jQuery的html(), text() 和 val() 方法来操作DOM元素。通过具体实例展示了这些方法的应用场景，如获取和设置输入框的值、修改div内的纯文本以及更新包含HTML标签的内容。

为什么80%的码农都做不了架构师？>>>

html就是你可以添加像<a></a>、<p></p>等标记
text只能写文本如果写了上面的标记则会以文本形式输出
val是属性，只有有该属性的对象才能调用

html(), 相当于 innerHTML
text(), 相当于 innerTEXT
val() 只有有value属性的才能取到值

1、<input type='text' value='xxx' id='inputVal'/> 这个就需要用 val()，只有当标签中有value属性时才能使用这个方法。例：$("inputVal").val("Hello Word!!!");既可以为文本框赋值：Hello Word！！！；$("inputVal").val();既可以获得这个文本框的value属性值：xxx。

2、<div id='divText'>div元素><span>你好</span></div >这个就用 text()。例：$("divText").text();就可以得到：div元素你好；$("divText").text("Hello Word!!!");这时就可以将其代码修改为：<div id='divText'>Hello Word!!!</div >

3、<div id="divHtml"><p>您好！</p></div> 这个就用html()。例：$("#divHtml").html();可以得到：<p>您好！</p>；$("#divHtml").html("<span>Hello Word!!!</span>");这时就可以得到代码：、<div id="divHtml"><span>Hello Word!!!</span></div>

转载于:https://my.oschina.net/liting/blog/548661