概述 .html()
返回值：String
描述：获取集合中第一个匹配元素的HTML内容
获取集合中第一个匹配元素的HTML内容
在一个 HTML 文档中, 我们可以使用 .html() 方法来获取任意一个元素的内容。 如果选择器匹配多个元素，那么只有第一个匹配元素的 HTML 内容会被获取。 考虑下面的代码：
$('div.demo-container').html();
下文的获取的<div>的内容， 必定是在文档中的第一个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有时丢弃包裹属性值的引号。
jQuery(), .append(), .after()等
——
有可能执行代码。
这可能造成注入脚本标记或使用HTML属性的执行代码
（例如，<img onload="">）。
不要使用这些方法插入来自不受信任来源的字符串，
如URL查询参数，cookies或表单输入。
这样做可能引起跨站点脚本（XSS）漏洞。
添加内容到文档之前应该删除或过滤掉任何用户输入。
示例
返回p元素的内容。
$('p').html();
点击段落将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( htmlString )
返回值：jQuery
描述：设置每一个匹配元素的html内容。
String
this指向元素集合中的当前元素。
这个 .html() 方法对 XML 文档无效.
我们可以使用 .html() 来设置元素的内容，这些元素中的任何内容会完全被新的内容取代。此外，用新的内容替换这些元素前，jQuery从子元素删除其他结构，如数据和事件处理程序。（手册网注：这样可以防止内存溢出。）
考虑以下的HTML：
<div class="demo-container">
<div class="demo-box">Demonstration Box</div>
</div>
我们可以像这样设置 <div class="demo-container">的HTML内容：
$('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 emph = '<em>' + $('p').length + ' paragraphs!</em>';
return '<p>All new content for ' + emph + '</p>';
});
给定一个拥有6个段落的HTML文档，在这个示例中将设置 <p>All new content for <em>6 paragraphs!</em></p>为<div class="demo-container">的新HTML内容。
这种方法使用浏览器的innerHTML 属性。有些浏览器可能不完全复制所提供的HTML源代码生成DOM。例如，Internet Explorer的版本8之前转换所有链接的href属性为绝对URL路径，和Internet Explorer第9版之前，不增加一个单独的兼容层的情况下，将无法正确处理HTML5元素。
要设置一个<script>元素的内容，
其不包含HTML，
使用的 .text()方法，而不是.html()。
注意: 在Internet Explorer中，包括第9版，
设置HTML元素的文本内容可能会破坏其子节点的文本节点，结果导致子节点的文本节点从文档中被删除。如果你想保留这些 DOM 元素的引用，需要他们将保持不变，请使用.empty().html(string)来代替.html(string)，以便从文档中删除元素之前的元素被分配到新的字符串。
示例
设置所有 p 元素的内容
$("p").html("Hello <b>world</b>!");使用函数来设置所有匹配元素的内容。
$("p").html(function(n){
return "这个 p 元素的 index 是：" + n;
});
为每个div设置一些内容。
<!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>
运行一下