.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源的HTML。例如，Internet Explorer 有时候会丢掉包围特性值的引号，如果它只包含了字母表字符的话。

补充说明：

  • 根据设计，任何接受HTML字符串的jQuery构造函数或方法——jQuery()、.append()、.after()等等——都可以潜在地执行代码。通过脚本标签注入或者使用执行代码的HTML特性（例如，<img onload="">）也能发生这种情况。不要使用这些方法来插入来自不可信任的来源的字符串，譬如URL查询参数、cookies，或表单输入。如果那样做的话会导致跨域脚本（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.jquery.com/jquery-1.10.2.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" ).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指的是集合中的当前元素。

XML文档中不能使用.html()方法。

如果.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>All new content for <em>6 paragraphs!</em></p>。

此方法使用浏览器的innerHTML属性。有些浏览器可能不能生成精确替代提供的HTML源的DOM。例如，Internet Explorer 8以前的版本针把链接上的所有的href属性转换为绝对URL，如果不加单独的兼容性图层，Internet Explorer ９以前的版本不能正确处理HTML5元素。

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

注意：在Internet Explorer 9以前的版本中，包括Internet Explorer 9，设置一个HTML元素的文本内容，可能会毁坏它的子元素的文本节点，作为操作的结果，将从文档中删除它的子元素。如果你正在保持对这些DOM元素的引用，需要它们不被改变，请使用.empty().html( string )代替.html(string)，从而当新字符串赋值到元素之前，会先从文档中删除这些元素。

示例：

给每个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.jquery.com/jquery-1.10.2.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>

演示：

给每个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.jquery.com/jquery-1.10.2.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>

演示：