jQuery属性篇-html

.html()

获取第一个匹配的元素的HTML内容。

.html()

这个方法不接受任何参数。

这个方法在XML文档中不适用。

在一个HTML文档中.html()能够用做获取任何元素的内容。如果这个选择器表达式匹配了多个元素，只有第一个匹配的元素将会返回它的HTMl内容。如下代码：

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

为了能够获取希望得到的<div>的内容，它需要是文档中第一个具有class="demo-container"的元素

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

结果是这样的:

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

这个方式使用了浏览器的innerHTML属性。有些浏览器可能不会返回严格复制文档中原始的HTML源码。比如，IE有时会丢弃属性值周围的引号如果他们数字的字符。

.html( htmlString )

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

.html(htmlString)

.html(function(index,oldhtml))

htmlString

类型是字符串。

为每一个匹配元素内容设置的HTML字符串。

function(index,oldhtml)

类型是函数。

一个函数返回用于设置的HTML内容。接收在集合中元素的索引的位置和原来的HTML值做为参数.jQuery会在调用该函数前，清空该元素；使用oldhtml参数指向原来的内容。在这个函数中，this指向集合中当前的元素。

.html()方法在xml文档中不适用

当.html()方法被用来设置元素的内容时，在元素里的任何内容都会被新的内容替换。另外，jQuery会在替换这些元素前，将如data和event handlers的结构从孩子元素移除。

如下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>

jQuery1.4版本中,.html()方法允许通过函数传递来设置html内容。

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

一个文档有六段段落，这个例子将设置<div class="demo-container">替换成<p>All new content for <em>6 paragraphs!</em></p>.

这个方法使用了浏览器的 innerHTML属性。一些浏览器也许严格的复制提供的html代码。比如，IE8之前版本将所有的在链接上的href属性转换成URLs，并且IE9之前版本不添加单独的兼容层就不能正确的实现html5的元素的特性。

NOTE:包括IE9和之前的版本，设置元素的文本内容这个操作会产生这样结果：也许会破坏正在被从文档中移除的孩子的文本节点。如果你保持对这些DOM元素的引用，并且不希望改变他们，使用.empty().html(string)来替换.html(string)，因此这些元素会在新的字符串被指定到元素上之前被移除。

<script>
//点击一个段落将之从html转换为text
 $("p").click(function () {
      var htmlStr = $(this).html();
      $(this).text(htmlStr);
    });
</script>

<script>
//为每一个div元素添加一些html
$("div").html("<span class='red'>Hello <b>Again</b></span>");
</script>

<script>
//为每个div元素添加一些html，然后立刻对这些html做进一步的操作
    $("div").html("<b>Wow!</b> Such excitement...");
    $("div b").append(document.createTextNode("!!!"))
              .css("color", "red");
</script>