複製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);
};
``