jQuery对元素内容操作

墨蓝 2022-05-12 00:38 343阅读 0赞

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());

得到的结果如下图

![3e7573c7-9d0e-35d4-89a2-0abb25327f74.png][]

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

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

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

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

![1cd0a06a-df77-329d-99c0-df9d5f469179.png][]

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

[3e7573c7-9d0e-35d4-89a2-0abb25327f74.png]: /images/20220512/c5d8567b0a02467ca37d1e0a34e35a70.png
[1cd0a06a-df77-329d-99c0-df9d5f469179.png]: /images/20220512/b0487517ef8b4ba9b554822f5a1d4f1f.png

发表评论取消回复

表情：

评论列表（有 0 条评论，343人围观）

还没有评论，来说两句吧...

相关阅读

相关 jQuery 对元素的操作CSS及过滤

![在这里插入图片描述][20190926234328349.png] CSS 1. 可以设置或者获取样式，也可以一次设置多个样式（写为json模式） $(

小灰灰/ 2023年08月17日 15:39/ 0 赞/ 100 阅读

相关 jQuery内容文本值及元素操作

一、jQuery内容文本值主要针对元素的内容还有表单的值操作 1. 普通元素的内容html() > 相当于原生innerHTML 语法： html()

- 日理万妓/ 2023年07月04日 11:23/ 0 赞/ 28 阅读

相关 jquery 元素控制(追加元素/追加内容)

一、在元素内部/外部追加元素 append,prepend:添加到子元素 before，after：作为兄弟元素添加 html：代码如下: <di

今天药忘吃喽~/ 2022年06月17日 03:13/ 0 赞/ 442 阅读

相关 jQuery_元素操作

一.高度和宽度获取高度： $("div").height(); // 高度 $("div").width(); //宽度

我就是我/ 2022年05月22日 12:39/ 0 赞/ 257 阅读

相关 jQuery对元素值操作

一 jQuery提供了3种对元素值操作的方法 <table style="border-collapse:collapse;border:1px solid bbbbbb;"

你的名字/ 2022年05月12日 00:38/ 0 赞/ 245 阅读

相关 jquery的元素的文本内容与HTML内容操作的区别

一应用获取和设置元素的文本内容与HTML内容二代码 <script language="javascript" src="JS/jquery-3.1.1.

布满荆棘的人生/ 2022年05月12日 00:38/ 0 赞/ 226 阅读

相关 jQuery对元素内容操作

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

墨蓝/ 2022年05月12日 00:38/ 0 赞/ 344 阅读

相关 jQuery更改元素内容

html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">

ゞ浴缸里的玫瑰/ 2022年01月20日 10:53/ 0 赞/ 304 阅读

相关 jq 操作元素内容

操作元素内容返回元素的所有内容，包括子标签对象数组.html(); function t1() {

清疚/ 2021年07月25日 02:02/ 0 赞/ 442 阅读

相关 jQuery添加标签元素/内容

通过 `jQuery`，可以很容易地添加新元素/内容。我们将学习用于添加新内容的四个 jQuery 方法： `append()` \- 在被选元素的结尾插入内容

r囧r小猫/ 2021年06月26日 16:06/ 0 赞/ 566 阅读