HTML元素的就地替换

我用以下js生成了一个表:

var tbl = document.createElement('table');
var tbdy = document.createElement('tbody');
var thd = document.createElement('thead');

var Headings = ["Lun","File","CDROM","Removable","ReadOnly","NoFUA"];
var tr = document.createElement('tr');
for (var i = 0; i < Headings.length; i++) {
    var td = document.createElement('td');
    td.appendChild(document.createTextNode(Headings[i]))
    tr.appendChild(td);
}
thd.appendChild(tr);

for (var lun in data) {
    console.log(lun);
    var tr = document.createElement('tr');
    tr.appendChild(document.createElement('td').appendChild(document.createTextNode(lun)));

    for (var info in data[lun]) {
        var td = document.createElement('td');
        td.appendChild(document.createTextNode(data[lun][info]))
        tr.appendChild(td)
    }
    tbdy.appendChild(tr);
}
tbl.appendChild(thd);
tbl.appendChild(tbdy);
var table = document.getElementById('file-table');

以及以下相关HTML:

<table id="file-table" style="width:100%"></table>

这个 appendChild 您在js的最后一行中看到的方法是有效的,然而,使用js在中创建表的目的是完全替换 'file-table' .

我试着在childNodes上迭代,并使用 removeChild 方法,但这会产生一些有趣的结果——不会完全删除所有节点,或者有时会出现关于第一个参数不是节点的错误消息。

有什么想法吗?