자바 스크립트를 사용하여 접을 수있는 div 만들기

Question

접을 수있는 div를 만들려고하는데 Chrome 콘솔에서 attr 데이터 역할 접을 수있는 줄에서 '정의되지 않은 함수가 아닙니다'라고 말합니다. 이 작업을 수행하는 방법을 알려주시겠습니까?

var iDiv = document.createElement('div'); 
iDiv.id = 'sectorDiv_'+distritoPosicion; 
iDiv.className = 'sectorDiv_'+distritoPosicion; 
iDiv.attr('data-role', 'collapsible'); 
iDiv.attr('data-collapsed-icon', 'arrow-r'); 
iDiv.attr('data-expanded-icon', 'arrow-d'); 
document.getElementsById('listaSectores')[0].appendChild(iDiv); 

distritoPosicion은 numberand listaSectores는 기존 div입니다.

Answer 1

attr()은 jQuery의 메소드입니다. 사용자는 이후 setAttribute()입니다.

iDiv.setAttribute('data-role', 'collapsible'); 
iDiv.setAttribute('data-collapsed-icon', 'arrow-r'); 
iDiv.setAttribute('data-expanded-icon', 'arrow-d'); 

또한 잘못된 방식으로 요소를 얻으려고합니다.

document.getElementsById('listaSectores')[0] 

는 정상적으로 getElementById (요소에서 더들) 없습니다와 그렇게 [0]이 경우에 필요하지 않은 단 하나 개의 요소를 반환합니다.

document.getElementById('listaSectores').appendChild(iDiv);