.html()
.html() 官网原E文： String
描述： 从匹配的第一个元素中获取HTML内容。
version added: 1.0.html()
这个方法对 XML 文档无效。
在一个 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>
举例：
点击段落将HTML转化为文本
<!DOCTYPE html>
<html>
<head>
<style>
p { margin:8px; font-size:20px; color:blue;
cursor:pointer; }
b { text-decoration:underline; }
button { cursor:pointer; }
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.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 htmlStr = $(this).html();
$(this).text(htmlStr);
});
</script>
</body>
</html>Demo:
.html( htmlString ) 返回 jQuery
描述： 设置每一个匹配元素的html内容。
-
version added: 1.0.html( htmlString )
htmlString用来设置每个匹配元素的一个HTML 字符串。
-
version added: 1.4.html( function(index, html) )
function(index, html)用来返回设置HTML内容的一个函数。接收元素的索引位置和元素旧的HTML作为参数。。
这个 .html() 方法对 XML 文档无效.
我们可以使用 .html() 来设置元素的内容，在这些元素的任何内容完全被新的内容取代。考虑以下的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内容：
举例
例子： 为每个div设置一些内容。
<!DOCTYPE html>
<html>
<head>
<style>
.red { color:red; }
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.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>Demo:
例子： 添加了一些html到每个div，然后立刻做进一步的操作来插入的HTML。
<!DOCTYPE html>
<html>
<head>
<style>
div { color:blue; font-size:18px; }
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.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>