javascript - 将字符串中的多个表行追加到现有表

Question

我的 AJAX 请求以字符串格式响应以下数据:

<tr> <td>data</td> <td>data</td> <td>data</td> </tr>
<tr> <td>data</td> <td>data</td> <td>data</td> </tr>
<tr> <td>data</td> <td>data</td> <td>data</td> </tr>
<tr> <td>data</td> <td>data</td> <td>data</td> </tr>

我想将此 HTML 附加到现有表格。

<table id="demo">
  <tr> <td>data</td> <td>data</td> <td>data</td> </tr>
  <tr> <td>data</td> <td>data</td> <td>data</td> </tr>
  <tr> <td>data</td> <td>data</td> <td>data</td> </tr>
</table>

我已经从 DOM 中选择了表格元素。

const table = document.getElementById('demo');

我希望能够执行如下操作，但是使用 appendChild 方法当然不可能实现这一点。

table.appendChild(xhr.responseText);

我正在努力完成的工作是否可以仅使用 DOM(不使用库)来完成，如果可以，我该如何正确使用它？

Answer 1

这正是Element#insertAdjacentHTML被设计用于。这可以防止使用 Element#innerHTML 再次通过解析器发送所有现有 HTML 时造成的浪费，这对于大型表来说可能成本高昂，进而会删除任何可能绑定(bind)的事件监听器现有元素以及对将被销毁的现有 DOM 节点的引用。

通常使用此方法比 Element#innerHTML 更安全。

这是一个简单的示例，可实现您在问题中请求的结果:

const rows = `
  <tr> <td>data</td> <td>data</td> <td>data</td> </tr>
  <tr> <td>data</td> <td>data</td> <td>data</td> </tr>
  <tr> <td>data</td> <td>data</td> <td>data</td> </tr>
  <tr> <td>data</td> <td>data</td> <td>data</td> </tr>
`;

const table = document.getElementById('demo');
table.insertAdjacentHTML('beforeend', rows);

<table id="demo">
  <tr> <td>data</td> <td>data</td> <td>data</td> </tr>
  <tr> <td>data</td> <td>data</td> <td>data</td> </tr>
  <tr> <td>data</td> <td>data</td> <td>data</td> </tr>
  <tr> <td colspan="3"><hr></td> </tr>
</table>

以下示例显示了每个位置的行为:

const table = document.getElementById('demo');

const rows = data => `
  <tr> <td>${data}</td> <td>${data}</td> <td>${data}</td> </tr>
  <tr> <td>${data}</td> <td>${data}</td> <td>${data}</td> </tr>
`;
/** <= ECMAScript 2015 
 * function rows(data) { 
 *   return [ '<tr> <td>','</td> <td>','</td> <td>','</td> </tr>' +
 *            '<tr> <td>','</td> <td>','</td> <td>','</td> </tr>' ].join(data);
 * }
 **/

const insert = position => table.insertAdjacentHTML(position, rows(position));
/** <= ECMAScript 2015 
 * function insert(position) { 
 *   return table.insertAdjacentHTML(position, rows(position));
 * }
 **/

const positions = ['beforebegin', 'afterbegin', 'beforeend', 'afterend'];

positions.forEach(insert);

<table id="demo">
  <tr> <td>existing data</td> <td>existing data</td> <td>existing data</td> </tr>
  <tr> <td>existing data</td> <td>existing data</td> <td>existing data</td> </tr>
</table>