javascript - 使用JavaScript创建可折叠的div

我正在尝试创建一个可折叠的div，但是chrome控制台说在线属性数据角色上的“未定义不是函数”是可折叠的。你能告诉我如何做到这一点：

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是一个数字，listaSectores是一个现有的div。

最佳答案

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（元素上没有s），它仅返回一个元素，因此在这种情况下不需要[0]。

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