使用createDocumentFragment（）添加表行

Question

更新 - 这是11月26日星期一完整改写的问题

---

此代码有效：

name_this_table = "station_list"+i;
station_table = document.getElementById(name_this_table);

for (station_index in station_detail)
{
    newRow = station_table.getElementsByTagName("tbody")[0].insertRow(-1);

    newCell = newRow.insertCell(-1);
    newCell.appendChild(document.createTextNode("one"));

    newCell = newRow.insertCell(-1);
    newCell.appendChild(document.createTextNode("two"));
    newRow = null;
}

但我想使用createDocumentFragment()，就像这样：

name_this_table = "station_list"+i;
station_table = document.getElementById(name_this_table);  // NOTE 1
//station_table = document.getElementById(name_this_table).tBodies[0];

var tableFrag;
tableFrag = document.createDocumentFragment();
tableFrag.appendChild(station_table);  // NOTE 2

for (station_index in station_detail)
{
    newRow = station_table.getElementsByTagName("tbody")[0].insertRow(-1); // NOTE 3
  //newRow = tableFrag.getElementsByTagName("tbody")[0].insertRow(-1);
    newCell = newRow.insertCell(-1);
    newCell.appendChild(document.createTextNode("one"));

    newCell = newRow.insertCell(-1);
    newCell.appendChild(document.createTextNode("two"));
    newRow = null;
}        
document.getElementById(name_this_table).appendChild(tableFrag);

我有各种报告失败 - 不是运行时错误，但渲染停止。

• 注1（上图） - 我尝试过以下一行（使用tbodies）作为 替代。
• 注2 - 如果我取消注释该行，则渲染停止 在那时候。
• 注3 - 我在这里尝试使用tableFrag ......

Answer 1

NEW ANSWER于11月27日星期二发布

经过大量的实验，这是有效的。我喜欢任何反馈（首先，我不确定我是否看到了性能提升。

name_this_table = "station_list"+i;
station_table = document.getElementById(name_this_table);  

var tableFrag;
tableFrag = document.createDocumentFragment();
tableFrag.appendChild(station_table);  // NOTE 2

for (station_index in station_detail)
{
    station_id = station_detail[station_index]["station_id"];
    var newRow;
    newRow = document.createDocumentFragment();
    newRow = station_table.getElementsByTagName("tbody")[0].insertRow(-1);

    newCell = newRow.insertCell(-1);
    newCell.appendChild(document.createTextNode("one"));

    ...

    station_table.appendChild(newRow);
    newRow = null;
}