.text()与.html()区别

【前言】

之前遇到过.html()与.text()区别的问题，今天再拿出来总结下

【列表】

（1）.html()；

（2）.text();

（3）.val();

【详解】

（1）.html();

读取和修改元素的HTML标签，对应js中的innerHTML

.html()是用来读取元素的HTML内容（包括其Html标签）

注意：.html()方法使用在多个元素上时，只读取第一个元素

方法内部使用的是DOM的innerHTML属性来处理的，所以在设置与获取上需要注意的一个最重要的问题，这个操作是针对整个HTML内容（不仅仅是文本内容，元素标签也包含在里面）

（2）.text();

读取和修改元素的纯文本内容对应js中的innerText

.text()用来读取元素的纯文本内容，包括其后代元素;

注意：.text()方法不能使用在表单元素上

结果返回一个字符串，包含所有匹配元素的合并文本

（3）.val();

读取或修改表单元素的value值

.val()是用来读取表单元素的"value"值

注意：.val()只能使用在表单元素上，例如<input>,<button>,<textarea>,<select>,<option>等

①通过.val()处理select元素，当没有选择项被选中，他返回null

②.val()方法多用来设置表单的字段的值

③如果select元素有multiple（多选）属性，并且至少一个选择项被选中，.val()方法返回一个数组。这个数组包含每个选中的选择项的值

【区别】

（1）读取数量

.val()方法和.html()相同，如果其应用在多个元素上时，只能读取第一个表单元素的"value"值，但是.text()和他们不一样，如果.text()应用在多个元素上时，将会读取所有选中元素的文本内容

（2）读取内容

虽然.html(),.text(),.val()三种方法都是用来读取选定元素的内容；

　　　　.html()是用来读取元素的html内容（包括html标签）；

　　　　.text()用来读取元素的纯文本内容，包括其后代元素；

　　　　.val()是用来读取表单元素的"value"值；

（3）.html(),.text(),.val()都可以使用回调函数的返回值来动态的改变多个元素的内容

<html>  
<head>  
  <style>  
  p { color:blue; margin:8px; }  
  b { color:red; }  
  </style>  
  <script src="http://code.jquery.com/jquery-latest.js"></script>  
</head>  
<body>  
  <p><b>Test</b> Paragraph.</p>  
  <p></p>  
<script>  
var str = $("p:first").text();  
$("p:last").html(str);  
</script>  
</body>  
</html>

结果：

【总结】

简单理解：

html就是你可以添加像<a></a>、<p></p>等标记

text只能写文本如果写了上面的标记则会以文本形式输出

val是属性，只有有该属性的对象才能调用（表单元素）

.text()与.html()区别

猜你喜欢