jQuery学习12---动态添加控件，网站列表的实现_jquery写类似edge添加站点等-优快云博客

本文介绍了一种使用jQuery动态创建DOM元素的方法，并通过实例展示了如何动态生成链接及网站列表。利用JavaScript对象表示的网站信息，实现了在网页上动态显示网站名称及链接的功能。

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

<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html;charset=GBK">
		<title></title>
		<script src="../jquery-1.8.2.js" type="text/javascript"></script>
		<style type="text/css">
		</style>
		<script type="text/javascript">
			$(function()
			{
				//点击按钮时动态生成控件演示
				$(":input[value=click]").click(function()
				{	
					//在内存中创建一个jQuery对象
					var $alink = $("<a id='a1' href='www.baidu.com'>baidu</a>");
					//可以对对象设置样式，并添加事件
					$alink.css("color","red");
					$alink.click(function()
					{
						alert("hhaa");
						return false;
					});
					//不会alert，因为a1还没有加载，可以放在append的后面
					$("a1").click(function()
					{
						alert("a1");
						return false;
					});
					//追加到d1,div结束标签之前。
					$("#d1").append($alink);
				});
				
				//动态生成网战列表
				var json = [{"name":"baidu","site":"http://www.baidu.com"},
				{"name":"csdn","site":"http://www.youkuaiyun.com"},
				{"name":"sina","site":"http://www.sina.com"}
				];
				//1、动态创建表格
				var $tb = $("<table id='tb'></table>");
				$tb.attr("border","1px");
				$tb.attr("width","400px");
				//2、把表格对象添加到div中
				$("#sites").append($tb);
				$.each(json,function()
				{
					//this，指代的是一个json对象，this.name就是name的值,this.site就是site的值
					var $tr = $("<tr></tr>");
					$tb.append($tr);
					
					//在tr中有两列
					var $td = $("<td><a href='"+this.site+"'>"+this.name+"</a></td>");
					$tr.append($td);
					
					$td = $("<td>"+this.site+"</td>");
					$tr.append($td);
				});
			});
		</script>
	</head>
	<!--
		动态创建Dom节点
	-->
	<body>
		<div id="d1">
			aaaa<input type="text" />
		</div>
		<input type="button" value="click" />
		<hr/>
		<div id="sites">
		<div>
	</body>
</html>