本节内容主要介绍的是如何使用jQuery中的.html(),.text()和.val()三种方法，用于读取，修改元素的html结构，元素的文本内容，以及表单元素的value值的方法。jQuery中为我们提供了多种方法用于对元素的HTML结构和元素的文本内容的操作，比如说，你可以给已存在的元素的内部，周围，前面或者后面增加新元素；或者用一个元素替代另一个元素；你也可以读取或者修改一个元素的内容或结构。有时我们就会比较模糊，不知道是给元素增加内容或者增加一个元素，比如说我们需要给一个存在的元素有效的增加这个元素的内容。
这里主要和大家一起分享如何增加，删除和替换元素，jQuery给我们提供了三种方法来对元素的结构，内容进行操作：
.html():读取和修改一个元素的HTML内容，详情.html()； .text()：读取和修改一个元素的文本内容，详情.text()； .val()：读取和修改一个表单元素的value字段值，详情.val()。正如你将看到的，这些方法可以让你轻松的读取或修改元素的原始内容或读取和修改任何HTML的值，也可以轻松的读取或修改表单中的value字段值。
操作元素的HTML结构——.html()
jQuery中的.html()方法可以让读取和修改一个元素的Html的内容，其主要有三种使用方式：.html(),.html(htmlString),.html(function(index,html){...})，下面依次来看看他们的具体使用方法。
1、读取一个元素的HTML结构——.html()
语法：
$("Element").html();返回值：string
说明：
.html()方法用来获取任意元素的HTML内容，如果选择器同时选中多于一个的元素时，那么其只能读取第一个元素的HTML内容。另外此法对XML方档是无效的。
要读取一个元素的HTML内容，首先你要选择这个元素，然后在调用jQuery中的.html()方法，比如说，下面的代码中，我们选择了div.demo中的p元素，然后通过.html()读取这个元素的HTML内容，如：
HTML Code:
复制代码 代码如下:
<div>
<p>这是一个段落元素，里面包含了一个a链接元素<a href="#">W3CPLUS</a></p>
</div>
jQuery Code
复制代码 代码如下:
$(document).ready(function(){
alert("Div.demo中的p元素的HTML结构："+$("div.demo p").html());
});
结果
上面代码会弹出一个警告框，显示原始的HTML标记内的元素，如上图所示。上面是div.demo只有一个Ｐ元素，如果有多个呢？会有什么现像发生，我们不枋在看一回：
HTML Markup
复制代码 代码如下:
<div>
<p>我是div.demo中第一个P元素：<a href="#">我在第一个P里面</a></p>
<p>这是一个段落元素，里面包含了一个a链接元素<a href="#">W3CPLUS</a></p>
</div>
jQuery Code
复制代码 代码如下:
$(document).ready(function(){
alert("Div.demo中的p元素的HTML结构："+$("div.demo p").html());
});
效果
从上面效果图中我们可以明显的看出，同样的一段jQuery代码，所得到的效果不一样。这里再次证明了如果你调用多个选定元素的.html()方法，那么其读取的只是第一个元素，换句话说：如果选择器匹配多于一个的元素，那么只有第一个匹配元素的 HTML 内容会被获取。
2、修改一个元素的HTML内容——.html(htmlString)
语法：
$("Element").html(htmlString);//htmlString是用来设置每个匹配元素的一个HTML 字符串返回值：jQuery对象
说明：
重新设置第一个匹配元素的html内容，这些元素的任何内容完全被新的内容取代。基于上面的实例，将原来的段落的HTML内容完全取代：
HTML Markup
复制代码 代码如下: