.html()

所属分类：Attributes | Manipulation > DOM Insertion, Inside 英文文档：.html()
获取集合中第一个匹配元素的HTML内容 或 设置每一个匹配元素的html内容。

Contents:

.html()返回: String

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

  • 添加的版本: 1.0.html()

    • 这个方法不接收任何元素。

获取集合中第一个匹配元素的HTML内容

在一个 HTML 文档中, 我们可以使用 .html() 方法来获取任意一个元素的内容。 如果选择器匹配多个元素，那么只有第一个匹配元素的 HTML 内容会被获取。 考虑下面的代码：

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

下文的获取的<div>的内容， 必定是在文档中的第一个class="demo-container"的div中获取的：

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 源代码。例如，如果属性值只包含字母数字字符，Internet Explorer有时丢弃包裹属性值的引号。

例子:

点击段落将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
 
<!DOCTYPE html>
<html>
<head>
  <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-latest.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 htmlStr = $(this).html();
  $(this).text(htmlStr);
});
</script>
 
</body>
</html>

Demo:

.html( htmlString )返回: jQuery

描述: 设置每一个匹配元素的html内容。

  • 添加的版本: 1.0.html( htmlString )

    • htmlString
      类型: String
      用来设置每个匹配元素的一个HTML 字符串。

  • 添加的版本: 1.4.html( function(index, oldhtml) )

    • function(index, oldhtml)
      类型: Function()
      用来返回设置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">的HTML内容：

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 emph = '<em>' + $('p').length + ' paragraphs!</em>';
  return '<p>All new content for ' + emph + '</p>';
});

给定一个拥有6个段落的HTML文档，在这个例子中将设置 <p>All new content for <em>6 paragraphs!</em></p>为<div class="demo-container">的新HTML内容。

这种方法使用浏览器的innerHTML 属性。有些浏览器可能不完全复制所提供的HTML源代码生成DOM。例如，Internet Explorer的版本8之前转换所有链接的href属性为绝对URL路径，和Internet Explorer第9版之前，不增加一个单独的兼容层的情况下，将无法正确处理HTML5元素。

注意: 在Internet Explorer中，包括第9版，  设置HTML元素的文本内容可能会破坏其子节点的文本节点，结果导致子节点的文本节点从文档中被删除。如果你想保留这些 DOM 元素的引用，需要他们将保持不变，请使用.empty().html(string)来代替.html(string)，以便从文档中删除元素之前的元素被分配到新的字符串。

例子:

Example: 为每个div设置一些内容。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
 
<!DOCTYPE html>
<html>
<head>
  <style>
  .red { color:red; }
  </style>
  <script src="https://code.jquery.com/jquery-latest.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>

Demo:

Example: 添加了一些html到每个div，然后立刻做进一步的操作来插入的HTML。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
 
<!DOCTYPE html>
<html>
<head>
  <style>
  div { color:blue; font-size:18px; }
  </style>
  <script src="https://code.jquery.com/jquery-latest.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>

Demo: