複製div的方法:使用jquery的语法,但是需要注意的是多次複製的bug:
複製的code:
要複製的div是:
<div class="container myPersonInterduction_container border"> <div class="row"> <div class="col-1"> <input class="form-check-input" type="checkbox"> </div> <div class="col-3"> <img id='showPigeonImage' src="{% static 'images/652206.png' %}" class="myPersonInterduction_image"> </div> <div class="col-7" id = 'pigeonInfors'> <ul class="list-group text-center"> <li class="list-group-item">公环号码:</li> <li class="list-group-item">性别:</li> <li class="list-group-item">鸽龄:</li> <li class="list-group-item">重量:</li> <li class="list-group-item">身长:</li> <li class="list-group-item">翅膀长度:</li> </ul> </div> <div class="col-1"> <button type="button" class="btn btn-info" onclick="func_cb_button_updatePigeon(this)" id="button_updatePigeon">修改</button> </div> </div> </div>
js中複製的code:
function copy_pigeonImformationDiv(pigeonInfos) { var newPersonInterduction_container = document.createElement('div'); var $myPersonInterduction_container = $('.myPersonInterduction_container').clone();//基本複製语法 // console.log($myPersonInterduction_container,typeof($myPersonInterduction_container),($myPersonInterduction_container).length); $(newPersonInterduction_container).html(($myPersonInterduction_container)[0]);//基本複製语法,多次複製的时候需要注意的bug:多次複製后,会变成多个,这时候,我们本来想複製单个的情况,就需要这样写了; var li_list = newPersonInterduction_container.getElementsByTagName('li'); li_list[0].innerHTML = "公环号码:"+pigeonInfos[2]; li_list[1].innerHTML = "性别:"+pigeonInfos[7]; li_list[2].innerHTML = "鸽龄:"+pigeonInfos[8]; li_list[3].innerHTML = "重量:"+pigeonInfos[11]; li_list[4].innerHTML = "身长:"+pigeonInfos[9]; li_list[5].innerHTML = "翅膀长度:"+pigeonInfos[10]; var checkboxList = newPersonInterduction_container.getElementsByTagName('input'); checkboxList[0].value = pigeonInfos[0]; var button = newPersonInterduction_container.getElementsByTagName('button'); button[0].value = pigeonInfos[0]; console.log(button[0],button[0].value); document.body.appendChild(newPersonInterduction_container); };``