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>