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的浪费，这对于大型表来说可能代价高昂，反过来会删除可能绑定到现有元素的任何事件侦听器。对将要销毁的现有DOM节点的引用。

在Element#innerHTML上使用此方法通常总是更安全。

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

＆＃13;

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);

＆＃13;

<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>

＆＃13;

以下示例显示了每个职位的行为：

＆＃13;

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);

＆＃13;

<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>

＆＃13;

Answer 2

您只需将其添加到innerHTML。

的末尾即可

table.innerHTML += xhr.responseText;

这基本上会将xhr.responseText添加到元素中HTML的末尾。

Answer 3

你可以试试这个：

＆＃13;

var ajaxData = `<tr> <td>data1-1</td><td>data1-2</td> </tr>
<tr> <td>data2-1</td><td>data2-2</td> </tr>
<tr> <td>data3-1</td><td>data3-2</td> </tr>
<tr> <td>data4-1</td><td>data4-2</td> </tr>`;

var table = document.getElementById('thatTable');

var template = document.createElement('template');
template.innerHTML = ajaxData;
table.appendChild(template.content);

＆＃13;

#thatTable td {
  border: 1px solid black;
}

＆＃13;

<table id="thatTable">
  <tr>
    <th>Head 1</th>
    <th>Head 2</th>
  </tr>
</table>

＆＃13;

我使用模板来保存您的ajax调用返回的HTML，然后将模板的内容附加到您的表中。

我是这样做的，以防你已经在桌子上有东西，就像在我的例子中一样。

将多个表行从字符串追加到现有表

3 个答案: