js动态修改文档内容

//一般情况下修改的是表格的内容数据，而标题行是不变动的
//所以标题行用html写好 后续的内容用js动态添加
<table border="">
        <thead>
            <tr>
                <th>用户名</th>
                <th>年龄</th>
                <th>性别</th>
            </tr>
        </thead>

        <tbody>
        </tbody>
    </table>

var arr = [{
        name: '向晚',
        age: 18,
        code: 'A'
    }, {
        name: '贝拉',
        age: 18,
        code: 'B'
    }, {
        name: '珈乐',
        age: 18,
        code: 'C'
    },{
        name: '嘉然',
        age: 18,
        code: 'D'
    },{
        name: '乃琳',
        age: 18,
        code: 'E'
    }]
    var tobodyEle = document.getElementsByTagName("tbody")[0];
    console.log(tobodyEle)
    // 通过js 来生成table 1.不变的位置 2.动态改变的位置
    // 通过js来修改tbody里的内容
    var trHtml = "";
    for (var i = 0; i < arr.length; i++) {
    //判断奇数偶数行，并添加不同样式
        if (i % 2 == 0) {
            trHtml +=
                `<tr style="background:blue"><td>${arr[i].name}</td><td>${arr[i].age}</td><td>${arr[i].gender}</td></tr>`;
        } else {
            trHtml += `<tr><td>${arr[i].name}</td><td>${arr[i].age}</td><td>${arr[i].gender}</td></tr>`;
        }
    }
    tobodyEle.innerHTML = trHtml;