JQuery html()
JQuery html()
JQuery html()
JQuery html()方法用于更改所选元素的全部内容。它将选定的元素内容替换为新的内容。
注意: 这是一个非常有用的功能，但由于其API文档，因此只能在有限的范围内使用。 JQuery html函数的API文档包含三个方法签名。
第一个方法签名没有参数，因此它仅返回该元素内的HTML。其余两个签名使用单个参数: 即字符串或返回字符串的函数。
语法:
$(selector).html()
用于返回内容。
$(selector).html(content)
用于设置内容。
$(selector).html(function (index, currentcontent))
用于通过调用函数设置内容。
JQuery html()方法用于设置内容或返回所选元素的内容。
设置内容: 使用此方法设置内容时，它将覆盖所有匹配元素的内容。
返回内容: 使用此方法返回内容时，它将返回第一个匹配元素的内容。
text()方法用于设置或仅返回所选元素的文本内容。
JQuery html()方法的参数
| 参数 | 说明 |
| Content | 这是必不可少的参数。用于指定所选元素的新内容。它还可以包含HTML标记。 |
| Function (index, currentcontent) | 这是一个可选参数。它指定一个函数，该函数返回所选元素的新内容。 索引: 显示元素在集合中的索引位置。 当前内容: 显示所选元素的当前HTML内容。 |
JQuery html()方法的示例
让我们以一个示例来演示JQuery html()方法。它正在改变所有p元素的内容。
<!DOCTYPE html>
<html>
<head>
<script src="/ajax/libs/JQuery/1.11.3/JQuery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("p").html("Hello <b>bianchenghao6.com</b>");
});
});
</script>
</head>
<body>
<button>单击此处更改所有p元素的内容</button>
<p>这是一个段落。</p>
<p>这是另一段。</p>
</body>
</html>
输出:
这是一个段落。
这是另一段。
JQuery html()示例2
让我们看一下返回HTML内容的JQuery html()方法的另一个示例。它仅返回第一段的内容。
<!DOCTYPE html>
<html>
<head>
<script src="/ajax/libs/JQuery/1.11.3/JQuery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
alert($("p").html());
});
});
</script>
</head>
<body>
<button>返回p元素的内容</button>
<p>这是第一个 <b>段落</b>。</p>
<p>这是另一个 <b>段落</b>。</p>
</body>
</html>
输出:
这是第一个段落。
这是另一个段落。
JQuery html()示例3
让我们看看将HTML转换为文本的JQuery 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;
}
</style>
<script src="/JQuery-1.10.2.js"></script>
</head>
<body>
<p>
<b>单击此处将html更改为文本。</b>
</p>
<script>
$("p").click(function() {
var htmlString = $( this ).html();
$( this ).text( htmlString );
});
</script>
</body>
</html>
输出:
单击此处将html更改为文本