jQuery 学习-样式篇（五）：jQuery 设置元素的 html 结构或 text 内容

最新推荐文章于 2024-04-07 20:26:20 发布

店伙计

最新推荐文章于 2024-04-07 20:26:20 发布

阅读量6.1k

点赞数

分类专栏： Web 前端开发笔记文章标签： jquery

本文链接：https://blog.csdn.net/xzk9381/article/details/111881205

版权

Web 前端开发笔记专栏收录该内容

16 篇文章 0 订阅

订阅专栏

推荐阅读

Helm3（K8S 资源对象管理工具）视频教程：https://edu.csdn.net/course/detail/32506

Helm3（K8S 资源对象管理工具）博客专栏：https://blog.csdn.net/xzk9381/category_10895812.html

本文原文链接：https://blog.csdn.net/xzk9381/article/details/111881205，转载请注明出处。如有发现文章中的任何问题，欢迎评论区留言。

一、设置或返回元素的 html 内容

使用 $('DOM').html() 方法可以设置或返回元素的 html 内容：

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<script src="jquery-1.12.4.js"></script>
	<script type="text/javascript">
		$(document).ready(function (){
			$('#mydiv').html("测试完成");
			console.log($('#mydiv').html())
		})
	</script>
</head>
<body>
	<div id="mydiv">测试</div>
</body>
</html>

上面的代码中，如果 mydiv 中还有子元素，那么子元素整体会作为字符串返回。

$('DOM').html() 也可以传递一个函数，使用函数的返回值作为 html 的内容：

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<script src="jquery-1.12.4.js"></script>
	<script type="text/javascript">
		$(document).ready(function (){
			$('#mydiv').html(x=>10);
			console.log($('#mydiv').html());
            
            $('#mydiv').html(function (){
				return 20;
			});
			console.log($('#mydiv').html())
		})
	</script>
</head>
<body>
	<div id="mydiv">测试</div>
</body>
</html>

使用该方法也可以直接向元素中添加子元素：

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<script src="jquery-1.12.4.js"></script>
	<script type="text/javascript">
		$(document).ready(function (){
			$('#mydiv').html("<div id='mydiv2'>测试2</div>");
			console.log($('#mydiv').html())
		})
	</script>
</head>
<body>
	<div id="mydiv">测试</div>
</body>
</html>

本文原文链接：https://blog.csdn.net/xzk9381/article/details/111881205

二、可以设置或返回元素的 text 内容

使用 $('DOM').text() 可以设置或返回元素的 text 内容，该方法与 html() 方法有如下几点不同：

如果元素中包含子元素，text() 方法不会返回子元素的标签，而只是返回子元素的内容；html() 会返回标签和内容
如果元素中的内容有空格，text() 方法和 html() 方法会保留空格，但是原生的 innerText 方法则不会保留空格。
text() 方法不可以向元素中添加子元素内容

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<script src="jquery-1.12.4.js"></script>
	<script type="text/javascript">
		$(document).ready(function (){
			$('#mydiv').text('  测试完成');          // 使用 text 方法设置一个带有空格的内容
			console.log($('#mydiv').text());        // 可以打印内容（带有空格）
            console.log(mydiv.innerText);           // 使用原生的方法打印不带空格
			console.log($('#mydiv').text() == $('#mydiv').html())   // 两个方法获取的值是相等的

			$('#mydiv').html($('#mydiv').text() + '<div>   测试2</div>')   // 使用 html 方法向其中添加子标签
			console.log($('#mydiv').text() == $('#mydiv').html())   // 这样两个方法获取到的值是不相等的
		})
	</script>
</head>
<body>
	<div id="mydiv">
		测试
	</div>
</body>
</html>

本文原文链接：https://blog.csdn.net/xzk9381/article/details/111881205，转载请注明出处。如有发现文章中的任何问题，欢迎评论区留言。

店伙计

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
jQuery 学习-样式篇（五）：jQuery 设置元素的 html 结构或 text 内容

一、设置或返回元素的 html 内容使用 $('DOM').html() 方法可以设置或返回元素的 html 内容：<!DOCTYPE html><html><head> <title></title> <script src="jquery-1.12.4.js"></script> <script type="text/javascript"> $(document).ready(functi
复制链接

扫一扫