자바 스크립트를 사용하여 div의 자식을 복제하십시오.

Question

내 div를 여러 번 복제하면 내부 자식 div도 변경해야합니다. (예 : id_j1, id_j2 등)

전 div를 복제하고 ID를 변경하지만 하위 ID는 변경하지 않습니다.

자바 스크립트

document.getElementById('btn_new_service').onclick = duplicate; 
var i =0; 
function duplicate() { 
    var original = document.getElementById('duplicator'); 
    var clone = original.cloneNode(true); // "deep" clone 
    clone.id = "duplicator" + ++i; // there can only be one element with an ID} 
original.parentNode.appendChild(clone); 

내가 위의 코드에 아래 코드를 추가하는 경우는 내가 Uncaught TypeError: clone.children is not a function의 오류가 발생합니다.

var new_div_ID = 'duplicator-' + i; 
var new_service_ID = 'c_service-'+i; 
var new_vat_ID = 'vat-'+i; 
var new_amount_ID = 'amount-'+i; 
var new_vatamount_ID = 'vat_amount-'+i; 
clone.children('#c_service').attr('id',new_service_ID); 
clone.children('#vat').attr('id',new_vat_ID); 
clone.children('#amount').attr('id',new_amount_ID); 
clone.children('#vat_amount').attr('id',new_vatamount_ID); 

두 가지 코드 조각에서 두 가지 코드 조각을 가져 와서 제대로 작동했지만 두 코드 코드를 결합 할 때만 작동합니다. 그 이유는 무엇입니까?

Answer 1

if i append the code below in the above code then i get an error of Uncaught TypeError: clone.children is not a function.

children 대신

가 확인 대신하고 setAttributequerySelector를 사용, 바닐라의 JS에서 function 아니다 그것은

그것은`jQuery를/DOMApi`의 meltin 냄비처럼 보이는

clone.querySelector('#c_service').setAttribute('id',new_service_ID);