jQuery html()的用法（附带实例）

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

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

<div>
  <span id="clock">当前时间：2023-09-09 星期六 13:20:10</span>
</div>

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

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

得到的结果如下图所示：

图 1 获取<div>元素的HTML内容

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

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

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

图 2 重新设置HTML内容后获取到的结果

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

下面我们通过一个具体的实例说明对元素的文本内容与 HTML 内容进行操作的区别。

【实例】获取和设置元素的文本内容与 HTML 内容。
1) 创建一个名为 index.html 的文件，在该文件的 <head> 标记中使用下面的语句引入 jQuery 库。

<script type="text/javascript" src="../js/jquery-3.6.4.min.js"></script>

2) 在页面的 <body> 标记中添加两个 <div> 标记，这两个 <div> 标记除了 id 属性值不同外，其他均相同。关键代码如下：
应用text()方法设置的内容

<div id="div1">
  <span id="clock">当前时间：2023-09-09 星期六 13:20:10</span>
</div>
<br />
应用html()方法设置的内容
<div id="div2">
  <span id="clock">当前时间：2023-09-09 星期六 13:20:10</span>
</div>

3) 在引入 jQuery 库的代码下方编写 jQuery 代码，实现为 <div> 标记设置文本内容和 HTML 内容，并获取设置后的文本内容和 HTML 内容。具体代码如下：

<script type="text/javascript">
$(document).ready(function() {
  $("#div1").text("<span style='color:#FF0000000'>我是通过 text()方法设置的HTML内容</span>");
  $("#div2").html("<span style='color:#FF0000'>我是通过 html()方法设置的HTML内容</span>");
  alert("通过 text()方法获取：\r\n"+$("div").text()+"\r\n 通过 html()方法获取：\r\n"+$("div").html());
});
</script>

运行本实例，将显示下图所示的运行结果：

图 3 获取和设置元素的文本内容与HTML内容

从该运行结果中可以看出，在使用 text() 设置文本内容时，即使文本内容中包含 HTML 代码，该代码也将作为普通文本内容，并不能作为 HTML 代码被浏览器解析，而使用 html() 设置的 HTML 内容中所包含的 HTML 代码可以被浏览器解析。

因此，文本内容“我是通过html()方法设置的HTML内容”是红色的，而通过 text() 方法设置的 HTML 内容则是按照原样显示的。

注意，在使用 text() 方法获取 <div> 元素的文本内容时，全部匹配元素中包含的文本内容都会被获取，即 id 属性值为 div1 和 div2 的元素的文本内容都会被获取。而在使用 html() 方法获取 <div> 元素的 HTML 内容时，只获取第 1 个匹配元素的 HTML 内容，即获取 id 属性值为 div1 元素的 HTML 内容，并没有获取 id 属性值为 div2 元素的 HTML 内容。

jQuery html()的用法（附带实例）

相关文章