js DOM 动态添加

异步获取数据难免需要动态加载页面，接下来会记录几种加载方式：

方法一：

前端页面：

<div class="panel_body form_group">
    <table class="stripe">
        <tbody id="role_body">

        </tbody>
    </table>
</div>

 

js：

/**
 * 将角色信息填充到页面
 */
function fillRoleInfoToPage(data){
    var tbodyDom = document.querySelector('#role_body');
    var roleRow = document.createElement('tr');

    var roleNameTd = document.createElement('td');
    roleNameTd.innerText =data['roleName'];

    var roleDescription = document.createElement('td');

    roleDescription.innerText = data['roleDescription'];

    var authoritiesTd = document.createElement('td');
    var authorities = '';
    var authList = data['Authorities'];
    var i = 1;
    if(authList.length === 0 ){
        return;
    }
    authList.forEach(auth => {
        var auths = auth.split("-");
        authorities += auths[auths.length-1]+",";
        if(i % 4 === 0){
            authorities += "\n";
        }
        i += 1;
    });

    var operateTd = document.createElement('td');
    operateTd.classList.add('operate');
    operateTd.classList.add('three_icon');
    /*分配*/
    var assignOperate = document.createElement('i');
    assignOperate.classList.add('fa');
    assignOperate.classList.add('fa-eye');
    assignOperate.classList.add('text_blue');
    /*编辑*/
    var editOperate = document.createElement('i');
    editOperate.classList.add('fa');
    editOperate.classList.add('fa-pencil');
    editOperate.classList.add('text_green');

    /*删除*/
    var delOperate = document.createElement('i');
    delOperate.classList.add('fa');
    delOperate.classList.add('fa-trash-o');
    delOperate.classList.add('text_red');
    delOperate.onclick = function () {
        showDevareBox(data['id'])
    };
    //delOperate.click(devareRole("'"+data['id']+"'"));
    operateTd.appendChild(assignOperate);
    operateTd.appendChild(editOperate);
    operateTd.appendChild(delOperate);

    authoritiesTd.innerText = authorities;
    roleRow.appendChild(roleNameTd);
    roleRow.appendChild(authoritiesTd);
    roleRow.appendChild(roleDescription);
    roleRow.appendChild(operateTd);

    tbodyDom.appendChild(roleRow);

}

效果：

 

 

缺点：代码多，麻烦，兼容性差。