.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>