如何通过XDR调用实现表格多行数据的增量追加？

方案1：使用insertAdjacentHTML()直接追加HTML字符串 #

这是最直接高效的方式，insertAdjacentHTML()支持在元素的指定位置插入HTML字符串，不会替换现有内容，刚好匹配你每次获取的<tr>批量内容：

var data = document.getElementById("data");
// 每次异步请求成功后，将返回的<tr>字符串追加到表格末尾
data.insertAdjacentHTML('beforeend', xhr.responseText);

'beforeend'参数表示在目标元素（这里是表格的<tbody>或表格本身）的内部最后位置插入内容，完全符合追加数据的需求，代码简洁且性能优异。

方案2：借助文档片段（DocumentFragment）批量添加DOM元素 #

如果需要在追加前对每行<tr>做额外DOM操作（比如绑定事件、修改样式），可以用文档片段减少页面重绘重排次数，提升性能：

var data = document.getElementById("data");
var tempContainer = document.createElement('div');
// 把返回的HTML字符串转成DOM元素
tempContainer.innerHTML = xhr.responseText;

var fragment = document.createDocumentFragment();
// 将临时容器内的所有<tr>移到文档片段
while (tempContainer.firstChild) {
  // 这里可以插入自定义逻辑，比如给<tr>添加事件
  // tempContainer.firstChild.addEventListener('click', handleRowClick);
  fragment.appendChild(tempContainer.firstChild);
}

// 一次性将所有行追加到表格，仅触发一次重排
data.appendChild(fragment);

文档片段不会被渲染到页面，所以批量移动元素到片段后再一次性追加，能避免多次DOM操作带来的性能损耗，适合需要处理DOM元素的场景。

方案3：使用innerHTML +=（不推荐，仅作补充） #

虽然可以通过innerHTML +=实现追加，但该方式会先读取现有HTML内容、拼接新内容后重新赋值，性能远不如前两种方案，仅在简单场景下临时使用：

var data = document.getElementById("data");
data.innerHTML += xhr.responseText;

内容的提问来源于stack exchange，提问作者Paul Taylor