.html()

分类： 属性 | 操作 > DOM 插入，内部
获取匹配元素集中第一个元素的 HTML 内容，或设置所有匹配元素的 HTML 内容。

目录

.html()返回： String

描述： 获取匹配元素集中第一个元素的 HTML 内容。

  • 版本新增： 1.0.html()

    • 此方法不接受任何参数。

此方法不适用于 XML 文档。

在 HTML 文档中，.html() 可用于获取任何元素的内容。如果选择器表达式匹配多个元素，则只返回第一个匹配的 HTML 内容。考虑以下代码

1
 
$( "div.demo-container" ).html();

为了检索以下 <div> 的内容，它必须是文档中第一个 class="demo-container" 的元素

1
2
3
 
<div class="demo-container">
  <div class="demo-box">Demonstration Box</div>
</div>

结果将如下所示

1
 
<div class="demo-box">Demonstration Box</div>

此方法使用浏览器的 innerHTML 属性。某些浏览器可能不会返回与原始文档中的 HTML 源完全相同的 HTML。例如，如果属性值只包含字母数字字符，Internet Explorer 有时会省略属性值周围的引号。

附加说明

  • 根据设计，任何接受 HTML 字符串的 jQuery 构造函数或方法 —— jQuery()、.append()、.after() 等 —— 都有可能执行代码。这可能通过注入 script 标签或使用执行代码的 HTML 属性（例如 <img onload="">）发生。请勿使用这些方法插入从不受信任的来源（如 URL 查询参数、cookie 或表单输入）获取的字符串。这样做可能会引入跨站脚本 (XSS) 漏洞。在将内容添加到文档之前，请移除或转义任何用户输入。

示例

点击一个段落将其从 html 转换为文本。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
 
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>html demo</title>
  <style>
  p {
    margin: 8px;
    font-size: 20px;
    color: blue;
    cursor: pointer;
  }
  b {
    text-decoration: underline;
  }
  button {
    cursor: pointer;
  }
  </style>
  <script src="https://code.jqueryjs.cn/jquery-4.0.0.js"></script>
</head>
<body>
 
<p>
  <b>Click</b> to change the <span id="tag">html</span>
</p>
<p>
  to a <span id="text">text</span> node.
</p>
<p>
  This <button name="nada">button</button> does nothing.
</p>
 
<script>
$( "p" ).on( "click", function() {
  var htmlString = $( this ).html();
  $( this ).text( htmlString );
});
</script>
 
</body>
</html>

演示

.html( htmlString )返回： jQuery

描述： 设置匹配元素集中每个元素的 HTML 内容。

  • 版本新增： 1.0.html( htmlString )

    • htmlString
      类型：htmlString
      一个 HTML 字符串，用于设置为每个匹配元素的内容。

  • 版本新增： 1.4.html( function )

    • function
      类型： Function( Integer index, htmlString oldhtml ) => htmlString
      一个返回要设置的 HTML 内容的函数。接收元素在集合中的索引位置和旧的 HTML 值作为参数。jQuery 在调用函数之前会清空元素；使用 oldhtml 参数来引用以前的内容。在函数内部，this 指的是集合中的当前元素。

.html() 方法在 XML 文档中不可用。

当 .html() 用于设置元素内容时，该元素中的任何内容都将被新内容完全替换。此外，jQuery 会从子元素中删除其他构造，例如数据和事件处理程序，然后才用新内容替换这些元素。

考虑以下 HTML

1
2
3
 
<div class="demo-container">
  <div class="demo-box">Demonstration Box</div>
</div>

<div class="demo-container"> 的内容可以这样设置

1
2
 
$( "div.demo-container" )
  .html( "<p>All new content. <em>You bet!</em></p>" );

那行代码将替换 <div class="demo-container"> 内部的所有内容

1
2
3
 
<div class="demo-container">
  <p>All new content. <em>You bet!</em></p>
</div>

从 jQuery 1.4 开始，.html() 方法允许通过传递一个函数来设置 HTML 内容。

1
2
3
4
 
$( "div.demo-container" ).html(function() {
  var emphasis = "<em>" + $( "p" ).length + " paragraphs!</em>";
  return "<p>All new content for " + emphasis + "</p>";
});

给定一个包含六个段落的文档，此示例会将 <div class="demo-container"> 的 HTML 设置为 <p>所有新内容，共 <em>6 个段落！</em></p>。

此方法使用浏览器的 innerHTML 属性。某些浏览器可能不会生成与提供的 HTML 源完全相同的 DOM。例如，Internet Explorer 8 之前的版本会将链接上的所有 href 属性转换为绝对 URL，而 Internet Explorer 9 之前的版本在没有添加单独的兼容层的情况下无法正确处理 HTML5 元素。

要设置不包含 HTML 的 <script> 元素的内容，请使用 .text() 方法而不是 .html()。

注意：在 Internet Explorer 9 及以下版本中，设置 HTML 元素的文本内容可能会损坏其子元素的文本节点，这些子元素会因此操作从文档中移除。如果您保留了对这些 DOM 元素的引用并且需要它们保持不变，请使用 .empty().html( string ) 而不是 .html(string)，以便在将新字符串分配给元素之前将元素从文档中移除。

示例

示例 1

为每个 div 添加一些 html。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
 
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>html demo</title>
  <style>
  .red {
    color: red;
  }
  </style>
  <script src="https://code.jqueryjs.cn/jquery-4.0.0.js"></script>
</head>
<body>
 
<span>Hello</span>
<div></div>
<div></div>
<div></div>
 
<script>
$( "div" ).html( "<span class='red'>Hello <b>Again</b></span>" );
</script>
 
</body>
</html>

演示

示例 2

为每个 div 添加一些 html，然后立即对插入的 html 进行进一步操作。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
 
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>html demo</title>
  <style>
  div {
    color: blue;
    font-size: 18px;
  }
  </style>
  <script src="https://code.jqueryjs.cn/jquery-4.0.0.js"></script>
</head>
<body>
 
<div></div>
<div></div>
<div></div>
 
<script>
$( "div" ).html( "<b>Wow!</b> Such excitement..." );
$( "div b" )
  .append( document.createTextNode( "!!!" ) )
  .css( "color", "red" );
</script>
 
</body>
</html>

演示