1. 程式人生 > >JS中div的動態新增

JS中div的動態新增

新建html檔案,body中加入如下程式碼

    //新增一個500*500的div快
    <div id="aa" style="width:500px;height:500px;background-color:#999;">
		
	</div>
	//新增一個500*500的表格
	<div id="bb" style="width:500px;height:500px;background-color:#888;">
		<table id="tb_1">
			
		</table>
	</div>
	//新建兩個button
	
	<input id="btn_1" type="button" value="新增元素">
	<input id="btn_2" type="button" value="獲取元素">

在script方法中輸入程式碼

<script type="text/javascript">

var flag = 0;
//當觸發id為btn_1時,執行function()
$("#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){//當flag為奇數時,新增第一個div
		$("#aa").append(div_child1);
	}
	else{//當flag為偶數時,新增第一個div
		$("#aa").append(div_child2);
	}
});
//當初發id為btn_2時,觸發
$("#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>aaa</td>';
		tr += '<td>sss</td>';
		tr += '<td>ddd</td>';
		tr += '<td>fff</td>';
		tr += '<td>ggg</td>';
		tr += '<td>hhh</td>';
		tr += '</tr>';
		
		trs += tr;
	}
	//將trs串新增到id為tb_1的表格中去
	$("#tb_1").append(trs);
});

	
</script>

執行實現: