当我们需要在jQuery中动态修改HTML元素的内容时，我们通常会使用html()方法。 html()方法允许我们替换或者获取HTML元素的内容。下面我们来详细讲解一下html()方法的用法。
html()方法的语法
使用html()方法的语法如下：
$(selector).html(content)
其中，$()是jQuery选择器函数，selector表示需要获取或者设置HTML内容的元素选择器，content表示设置HTML内容。
如果使用html()方法仅传递一个元素选择器，则表示获取元素内容：
var content = $(selector).html(); // 获取元素内容
如果同时传递元素选择器和设置内容，则表示替换元素内容：
$(selector).html(content); // 替换元素内容
html()方法的应用实例
实例1：替换HTML元素内容
下面的例子会替换id为example的div元素的内容：
<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
<div id="example">
<h1>旧内容</h1>
</div>
<script>
// 替换元素内容
$('#example').html('<h1>新内容</h1>');
</script>
</body>
</html>
实例2：获取HTML元素内容
我们可以使用html()方法获取指定元素的HTML内容。下面的例子会获取id为example的div元素的内容并以弹窗的方式显示出来：
<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
<div id="example">
<h1>内容</h1>
</div>
<button onclick="showContent()">获取内容</button>
<script>
// 获取元素内容并弹窗显示
function showContent() {
var content = $('#example').html();
alert(content);
}
</script>
</body>
</html>
可以看到，该例子中我们使用了一个按钮，并且绑定了一个点击事件。当用户点击按钮时，会调用一个JavaScript函数showContent()，该函数会获取id为example的div元素的内容并以弹窗的方式显示出来。
通过以上两个例子，我们可以看到html()方法在jQuery中的应用，我们可以通过html()方法动态替换HTML元素的内容，也可以通过html()方法获取HTML元素的内容。
本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：jQuery中html()方法用法实例 - Python技术站
微信扫一扫 
支付宝扫一扫 