附加多个元素的推荐方法答案

【问题标题】：Recommended way to append multiple elements附加多个元素的推荐方法
【发布时间】：2020-09-08 23:23:29
【问题描述】：

我想在我的表中附加多个包含多列的表行。推荐的做法是什么？我想出了三个选项。优点和缺点？

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 都包含相同的数据。其中一些有一个跨度，一些有一个输入字段。

【问题讨论】：

你可以使用模板文字使用反引号`mystring ${variable}`你也可以在反引号之间有换行符
@user120242 所以你会推荐使用$('table').append('<tr><td>${var}</td>...</tr>)的选项1？
我只是抛出了一个选项，可以更轻松地处理 html 字符串构建。我不建议将其作为任何复杂网络应用程序的基础。但它会让你的例子更容易做：$('table').append(`<tr><td>${var}</td></tr>`).

标签： javascript jquery html-table append

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

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

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

DocumentFragments 是 DOM Node 对象，它们绝不是主 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>')，但以一种易于调试的可读性很强的方式。

【讨论】：

如果不是所有的 td 都具有相同的数据，这是否有效？有些有输入字段和一些跨度？（例如 1 = 跨度，2 = 跨度，3 = 输入，4 = 跨度，5 = 输入等）
是的。它肯定会奏效。这里的方法是在屏幕上只附加一次你的节点，因为片段上的每个appendChild 都是在内存中完成的。
好的，我将保存您的代码以用于其他项目。谢谢！ :)