新建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>
执行实现: