JS中div的動態新增
阿新 • • 發佈:2018-11-09
新建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>
執行實現: