jQuery对元素内容操作

jQuery提供了对元素的内容和值进行操作的方法，其中，元素的值是元素的一种属性，大部分元素的值都对应value属性。下面我们再来对元素的内容进行介绍。

元素的内容是指定义元素的起始标记和结束标记中间的内容，又可分为文本内容和HTML内容。

那么什么是元素的文本内容和HTML内容？通过下面这段来说明。

<div>

      <p>测试内容</p>

</div>

在这段代码中，div元素的文本内容就是“测试内容”，文本内容不包含元素的子元素，只包含元素的文本内容。

而“<p>测试内容</p>”就是<div>元素的HTML内容，HTML内容不仅包含元素的文本内容，而且还包含元素的子元素。

一 对文本的内容操作

jQuery提供了text()和text(val)两个方法用于对文本内容操作，其中text()用于获取全部匹配元素的文本内容，text(val)用于设置全部匹配元素的文本内容。

例如，在一个HTML页面中，包括下面3行代码。

<div>

      <span id="clock">当前时间：2016-07-06 星期三 13:20:10</span>

</div>

要获取div元素的文本内容，可以使用下面的代码：

$("div").text();

得到的结果为：当前时间：2016-07-06 星期三 13:20:10

text()方法取得的结果是所有匹配元素包含的文本组合起来的文本内容，这个方法也对XML文档有效，可以用text()方法解析XML文档元素的文本内容。

要重新设置div元素的文本内容，可以使用下面的代码：

$("div").text("我是通过text()方法设置的文本内容");

这时，再应用“$("div").text();”获取div元素的文本内容时，将得到以下内容：

我是通过text()方法设置的文本内容

使用text()方法重新设置div元素的文本内容后，div元素原来的内容将被新设置的内容替换掉，包括HTML内容。

例如，对下面的代码

<div><span id="clock">当前时间：2011-07-06 星期三 13:20:10</span></div>

应用“$("div").text("我是通过text()方法设置的文本内容");”设置值后，该<div>标记的内容将变为

<div>我是通过text()方法设置的文本内容</div>

二 对HTML内容操作

jQuery提供了html()和html(val)两个方法用于对HTML内容操作，其中html()用于获取第一个匹配元素的HTML内容，html(val)用于设置全部匹配元素的HTML内容。

例如，在一个HTML页面中，包括下面3行代码。

<div>

<span id="clock">当前时间：2016-07-06 星期三 13:20:10</span>

</div>

要获取div元素的HTML内容，可以使用下面的代码：

alert($("div").html());

得到的结果如下图

 

text()方法取得的结果是所有匹配元素包含的文本组合起来的文本内容，这个方法也对XML文档有效，可以用text()方法解析XML文档元素的文本内容。

要重新设置div元素的HTML内容，可以使用下面的代码：

$("div").html("<span style='color:#FF0000'>我是通过html()方法设置的HTML内容</span>");

这时，再应用“$("div").html();”获取div元素的HTML内容时，将得到下图所示的内容。

 

html()方法与html(val)不能用于XML文档的，但是可以用于XHTML文档。