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