Javascript

天使之翼 ` 2019-07-01

展开全文

1.使用js添加。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
		<div id="div_1" style="width:500px;height:500px;background-color:#555;">
		</div>
		<input type="button" value="添加元素"/>
</body>
<script type="text/javascript">
	var div_child='<div id="div_child_1"style="height:200px;width:200px;background-color:#000;"></div>'
	var c=document.getElementById('div_1');
	c.innerHTML+=div_child;
</script>
</html>

var div_child='<div id="div_child_1"style="height:200px;width:200px;background-color:#000;"></div>'

注意，这个语句要用单引号括起来，它具有转义的作用。

2.使用jQuery语法添加（借助选择器）

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
	<script src="../js/jquery.js"></script>
</head>
<body>
	<div id="div_1" style="width:500px;height:500px;background-color:#bbb;">
	</div>
	<input id="btn_1" type="button"  value="添加元素" />
</body>
	<script type="text/javascript">
		var flag = 0;
		$("#btn_1").bind("click",function(){
			var div_child1 = '<div id="div_child_1" style="height:100px;width:100px;background-color:#777;float:left"></div>';
			var div_child2 = '<div id="div_child_1" style="height:100px;width:100px;background-color:#999;float:left"></div>';
			flag += 1;
			if( (flag % 2) == 1){
				$("#div_1").append(div_child1);
			}
			else{
				$("#div_1").append(div_child2);
			}
		});
	</script>
</html>

下面是运行界面：

一开始是没有的，这时候点击添加元素的按钮，则会添加一个。

多点几下：

点满：

点满就有了一个棋盘啦~~。

下面做个别的，动态添加表格。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
	<script src="../js/jquery.js"></script>
</head>
<body>
	<div id="div_1" style="width:500px;height:500px;background-color:#bbb;">
	</div>
	<div id="div_2" style="width:500px;height:500px;background-color:#ddd;">
			<table id="tb_1"style="width:100%;">
			</table>
	</div>
	<input id="btn_1" type="button"  value="添加元素" />
	<input id="btn_2" type="button" value="获取数据"/>
	<input id="btn_3" type="button"  value="测试"/>
</body>
	<script type="text/javascript">
		var flag = 0;
		$("#btn_1").bind("click",function(){
			var div_child1 = '<div id="div_child_1" style="height:100px;width:100px;background-color:#777;float:left"></div>';
			var div_child2 = '<div id="div_child_1" style="height:100px;width:100px;background-color:#999;float:left"></div>';
			flag += 1;
			if( (flag % 2) == 1){
				$("#div_1").append(div_child1);
			}
			else{
				$("#div_1").append(div_child2);
			}
		});
		$("#btn_2").bind("click",function(){
			var trs = '<tr> <td>姓名</td><td>性别</td><td>年龄</td><td>学校</td><td>班级</td><td>宿舍</td> </tr>';
			for(var i = 0; i < 10; i++){
				var tr = '';
				tr += '<tr style="width:100%;height:35px;">';
				tr += '<td>四海</td>';
				tr += '<td>青松</td>';
				tr += '<td>作春色</td>';
				tr += '<td>满怀</td>';
				tr += '<td>烂漫</td>';
				tr += '<td>自南来</td>';
				tr += '</tr>';
				trs += tr;
			}
			$("#tb_1").append(trs);
		});
	</script>
</html>