jQuery 学习-DOM篇（一）：jQuery 创建元素并添加属性

编程知识行业动态更新时间:2024-06-13 00:21:07

推荐阅读

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

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

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

使用 jQuery 创建元素并添加属性，可以直接使用 $(‘element’) 进行添加：

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

这样即可生成一个 div 标签，如果要在这个 div 标签中添加文字，可以直接在其中添加即可：

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

接下来是为元素添加属性：

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

如果要创建多级标签，也是直接在其中添加字符串内容即可：

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<script src="jquery-1.12.4.js"></script>
	<script type="text/javascript">
		$('document').ready(function (){
			console.log($('<div class="mydiv" id="div1">测试<span class="myspan">子元素</span></div>'))
		})
	</script>
</head>
<body>
</body>
</html>