HTML 元素的就地替换
In-place replacement of HTML Elements
我有 table 是我用以下 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>
你在 js 的最后一行看到的 appendChild
方法是有效的,但是在 js 中创建 table 的目的是完全替换 [= 的所有子节点14=]。
我已经尝试遍历 childNodes 并使用 removeChild
方法,但这会产生一些有趣的结果 - 不会完全删除所有节点,或者有时会出现关于第一个参数不是节点的错误消息。
有什么想法吗?
你能select目标元素,并直接更新它们吗?
document.getElementById('td1').innerHTML = "Some text to enter"
如果没有,您也可以 replace the table body 本身:
var new_tbody = document.createElement('tbody');
populate_with_new_rows(new_tbody);
old_tbody.parentNode.replaceChild(new_tbody, old_tbody)
我有 table 是我用以下 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>
你在 js 的最后一行看到的 appendChild
方法是有效的,但是在 js 中创建 table 的目的是完全替换 [= 的所有子节点14=]。
我已经尝试遍历 childNodes 并使用 removeChild
方法,但这会产生一些有趣的结果 - 不会完全删除所有节点,或者有时会出现关于第一个参数不是节点的错误消息。
有什么想法吗?
你能select目标元素,并直接更新它们吗?
document.getElementById('td1').innerHTML = "Some text to enter"
如果没有,您也可以 replace the table body 本身:
var new_tbody = document.createElement('tbody');
populate_with_new_rows(new_tbody);
old_tbody.parentNode.replaceChild(new_tbody, old_tbody)