Jquery的text()和html()方法在li与div取值结果解析

最新推荐文章于 2025-08-22 13:39:56 发布

最新推荐文章于 2025-08-22 13:39:56 发布 · 119 阅读

文章标签：

#javascript #xhtml

本文通过实例演示了jQuery中html()和text()方法的区别。这两种方法用于获取或设置HTML内容或纯文本内容。文章展示了在不同元素（如li和div）中使用这两种方法的效果，并解释了它们之间的差异。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Jquery</title>
<script type="text/javascript" src="../Js/jquery1.6.1.js"></script>
<script type="text/javascript">
	$(document).ready(function() {
		var ht = $('.toshow li').html();
		var te = $('.toshow li').text();
		var htte = '这是html()在li的显示结果' + ht + '****' + '<br>这是text()在li的显示结果' + te + '****';
		var ht1 = $('.toshow1').html();
		var te1 = $('.toshow1').text();
		htte += '<br>这是html()在div的显示结果' + ht1 + '****' + '<br>这是text()在div的显示结果' + te1 + '****';
		$('.totext').html(htte);
	});
</script>
</head>

<body>



<div class="toshow">
	<ul>
    	<li>sj*</li>
    </ul>
</div>
<div class="toshow1">sj*</div>
<div class="totext"></div>
<div class="result">
	在li下，将会在最后有一个' '空格
</div>


</body>
</html>

先上代码。

运行结果如下：

这是html()在li的显示结果sj* ****
这是text()在li的显示结果sj* ****
这是html()在div的显示结果sj*****
这是text()在div的显示结果sj*****

在li下，将会在最后有一个' '空格