推荐的添加多个元素的方式

Question

我想将具有多列的多个表行附加到我的表中。推荐的做事方式是什么？我想出了三个选择。优点和缺点？

1：

$('table').append('<tr>...</tr>);

2：

html.push('<tr>');

elements.each(function() {
    html.push('<td>...</td>');
});

html.push('</tr>');
$('table').append(html);

3：

html = '<tr>' +
       ... +
       '</tr>';

$('table').append(html);

PS：附加数据是使用$.getJSON从我的数据库中存储的（存储在元素中），并且没有所有tds都包含相同的数据。其中一些具有跨度，一些具有输入字段。

Answer 1

根据您的需求，我认为您最好的选择是第一个，但正如'user120242'所说的那样，这样做会更好。

$('table').append(`<tr><td>${var}</td></tr>`)

Answer 2

更新dom的最佳方法是使用createDocumentFragment。

它将创建一个新的空DocumentFragment，可以在其中添加DOM节点以构建屏幕外DOM树。

DocumentFragments是DOM节点对象，它们从来都不是主DOM树的一部分。通常的用例是创建文档片段，将元素附加到文档片段，然后将文档片段附加到DOM树。

由于文档片段在内存中，而不是主DOM树的一部分，因此在其上附加子代不会导致页面重排，从而提高性能。

针对您的情况：

const dataToFill = [[1,2,3], [4,5,6], [7,8,9]]
const fragment = document.createDocumentFragment()
for (const row of dataToFill){
  const tr = document.createElement('tr')
  for (const column of row) {
    const td = document.createElement('td')
    td.textContent = column
    tr.appendChild(td)
  }
  fragment.appendChild(tr)
}
document.getElementById('my-table').appendChild(fragment)

<table id="my-table">
  <tr>
    <th>Column 1</th>
    <th>Column 2</th>
    <th>Column 3</th>
  </tr>

</table>

如果删除document.getElementById('my-table').appendChild(fragment)，则不会看到表格包含的内容，这意味着该表格仅在循环外被渲染一次。所有其他操作仅在内存中完成。

这使其等效于$('table').append('<tr>...</tr>')，但易于阅读，易于调试。