返回值:Stringhtml()

取得所有匹配的元素中，第一个匹配元素的 HTML 内容。

该方法对 XML 文档无效。

在一个 HTML 文档中,.html() 可能得到任何元素的内容。如果指定的选择器表达式匹配了多个元素，那么只有第一个匹配元素的 HTML 内容会被返回。例如: 

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

为了返回如下 <div> 的内容,该 <div> 必须是文档中第一个含有 class="demo-container" 的 <div>: 

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

得到的结果如下:

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

该方法使用了浏览器的 innerHTML 属性。有些浏览器返回的结果可能不是原始文档的 HTML 源代码。例如，如果属性的值只是英数字的话，那么 IE 有时不会使用引号包裹它们。

示例:

点击一个段落，将它的 HTML 代码转换成文本。

<!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="jquery.min.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>

演示:

返回值:jQueryhtml(htmlString)

为每个匹配的元素设置 HTML 内容。

.html() 方法对 XML 文档无效。

当使用 .html() 为元素设置内容时,该元素上任何原有的内容都会被新的内容所替换。例如： 

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

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

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

上面的代码会替换 <div class="demo-container"> 内部的任何内容: 

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

从 jQuery 1.4 开始,.html() 方法允许将一个函数作为参数，返回需要设定的 HTML 内容。 

$('div.demo-container').html(function() {
  var emph = '<em>' + $('p').length + ' paragraphs!</em>';
  return '<p>All new content for ' + emph + '</p>';
});

如果给定的文档中含有 6 个段落，那么上面的例子会为 <div class="demo-container"> 设置 <p>All new content for <em>6 paragraphs!</em></p> 内容。

该方法使用了浏览器的 innerHTML 属性。有些浏览器可能不会生成一个根据原始 HTML 源代码产生的 DOM 副本。例如，在 IE 8 之前,会将所有的 href 属性转换成绝对路径。IE 9 之前，如果不添加额外的 compatibility layer（兼容层），IE 9 是无法正确处理 HTML 5 元素的。

注意： 在 Internet Explorer 中，包括 IE 9，设置 HTML 元素的文本内容，可能会破坏其子节点的文本节点，结果导致子节点的文本节点从文档中被删除。如果你想保留这些 DOM 元素的引用，并且不希望它们被改变，请使用 .empty().html(string) 来代替 .html(string)。这样的话，在新的字符串赋给元素之前，会先从文档中移除该元素的内容。

示例:

为每个 div 添加一些 html。

<!DOCTYPE html>
<html>
<head>
<style>

  .red { color:red; }
  </style>
<script src="jquery.min.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 做进一步操作。

<!DOCTYPE html>
<html>
<head>
<style>
  div { color:blue; font-size:18px; }
  </style>
<script src="jquery.min.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>

演示: