.html()
.html()
描述：获得匹配的元素集合中第一个元素的HTML内容。
该方法不接受任何参数
该方法在XML document中不可用。
在一个HTML document中，.html()可以用来获得一个元素的内容。如果选择器表达式匹配了不止一个元素，只会返回第一个匹配的元素的html。设想以下代码：
$( "div.demo-container" ).html();
为了检索得后面的<div>内容，它必须是document中第一个带有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源的严格复制。举个例子，Internet Explorer有时候会丢失元素属性值周围的引号，如果它们只包含了字母数字的字符。
其它说明
- 根据设计意图，任何接受一段HTML字符串的jQuery构造器或者jQuery方法——包括
jQuery()、.append()、.after()等等——都会潜在地执行代码。这可能发生脚本标签注入，或者使用HTML的元素属性执行代码（例如，<img onload="">。）千万不要用这些方法来插入从不可信任的来源获得的字符串，比如说URL查询参数、cookies，或者表单输入。这样做还可能引入跨站脚本（XSS）漏洞。在往document添加内容之前要删除或转义一切的用户输入。
示例
点击一个段落文本，把它从html转换成文本。
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>html demo</title>
<style>
p {
margin: 8px;
font-size: 20px;
color: blue;
cursor: pointer;
}
b {
text-decoration: underline;
}
button {
cursor: pointer;
}
</style>
<script src="https://code.jquery.com/jquery-1.10.2.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 htmlString = $( this ).html();
$( this ).text( htmlString );
});
</script>
</body>
</html>
演示结果
.html()
描述：针对每个匹配的元素设置HTML内容。
- htmlString类型：htmlString一个字符串，被设置为每个匹配的元素的内容。
- function一个函数，返回要设置的内容。检索集合中元素的索引位置以及旧HTML值作为参数。在调用该函数之前，jQuery会清空该元素；使用oldhtml参数以引用以前的内容。在这个函数内部，
this引用了集合中的当前元素。
.html()方法在XML document中不可用。
当.html()用来设置元素的内容时，元素中的任何内容会被新内容彻底取代。另外，在用新内容替换那些元素之前，jQuery会删除别的结构，比如说子元素上的数据以及事件处理函数
设想下面的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 emphasis = "<em>" + $( "p" ).length + " paragraphs!</em>";
return "<p>All new content for " + emphasis + "</p>";
});
给定一个带有六个段落文本的document，示例会把<div class="demo-container">的html设置成<p>All new content for <em>6 paragraphs!</em></p>。
该方法使用浏览器的innerHTML属性。有些浏览器可能不能严格复制提供的html源，生成DOM。举个例子，Internet Explorer 8及以前的版本会把所有的链接上的href属性转换成绝对的URL，而且Internet Explorer 9及以前的版本如果不附加独立的兼容性层，就不能正确地处理HTML 5元素。
<script>元素不能包含HTML，要想给它设置内容，请使用.text()方法，而不是.html()方法。
注意：在Internet Explorer 9以及后的版本，设置一个HTML元素的文本内容，可能破坏它的子元素的文本节点，操作结果是从document中删除了它的子元素。如果你要保持对这些DOM元素的引用，并需要它们不变，请使用.empty().html( string )来代替.html(string)，因此这些在新字符串分配到元素之前，会从document中删除这些子元素。
示例
向每个div添加更多的html。
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>html demo</title>
<style>
.red {
color: red;
}
</style>
<script src="https://code.jquery.com/jquery-1.10.2.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>
演示结果
把一些html添加到每个div上，然后立即对插入的html作更多的操纵。
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>html demo</title>
<style>
div {
color: blue;
font-size: 18px;
}
</style>
<script src="https://code.jquery.com/jquery-1.10.2.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>
演示结果