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>
运行结果:
这里新写了一个div,用来装表格。点击获取数据按钮则会出现事先写好的表格。如下图:
好啦,以上就是动态添加的方法,大家也可以试试添加别的东西。
联系客服