使用JavaScript创建表的这些方法的优缺点是什么？

我找到了两种在JS中创建表的方法：

使用

insertRow

和

insertCell

：

var table = document.getElementById ("table");
var row = table.insertRow (1);
var cell = row.insertCell (0);
cell.innerHTML = "New row";

使用普通DOM操作：

var tbl     = document.createElement("table");
var tblBody = document.createElement("tbody");

// creating all cells
for (var j = 0; j < 2; j++) {
  // creates a table row
  var row = document.createElement("tr");

  for (var i = 0; i < 2; i++) {
    // Create a <td> element and a text node, make the text
    // node the contents of the <td>, and put the <td> at
    // the end of the table row
    var cell = document.createElement("td");
    var cellText = document.createTextNode("cell is row "+j+", column "+i);
    cell.appendChild(cellText);
    row.appendChild(cell);
  }

  // add the row to the end of the table body
  tblBody.appendChild(row);
}

var tbl=document.createElement（“表”）；
var tblBody=document.createElement（“tbody”）；
//创建所有单元格
对于（var j=0；j<2；j++）{
//创建一个表行
var行=document.createElement（“tr”）；
对于（变量i=0；i<2；i++）{
//创建元素和文本节点，使文本
//节点的内容，并将
//表行的末尾
var cell=document.createElement（“td”）；
var cellText=document.createTextNode（“单元格是行“+j+”，列“+i”）；
cell.appendChild（cellText）；
子行（单元格）；
}
//将该行添加到表体的末尾
tblBody.appendChild（世界其他地区）；
}

---

我看到的第一个是专门为表创建的，但是第二个是在MDN中提到的，所以我有点困惑应该使用什么方法。每种方法的优缺点是什么？什么时候使用一个而不是另一个？

如果可以避免使用元素，只需将字符串放入

innerHTML

中，您将获得最佳性能。下面是一些创建表的不同方法

功能代码 我们可以创建一些函数来生成HTML。这段代码将非常快（但可能更快）。我们将为所有这些示例假设这些数据

var heading = ['Name', 'Points'];

var data = [
  ["Joe", 50],
  ["Jack", 80],
  ["Doug <b>'the hammer'</b> Jones", 76]
];

我们的HTML使用了

foreach

绑定，它在数组上进行迭代

$data

指的是当前数组项

<table>
  <thead>
    <tr data-bind="foreach: heading">
      <th data-bind="text: $data"></th>
    </tr>
  </thead>
  <tbody data-bind="foreach: data">
    <tr data-bind="foreach: $data">
      <td data-bind="html: $data"></td>
    </tr>
  </tbody>
</table>

我们的HTML类似于KnockoutJS。一个区别是循环语法，它允许我们命名元素，例如数据中的

行，而不是将元素称为
$data

  <table ng-controller="MyTableCtrl">
    <thead>
      <tr>
        <th ng-repeat="head in heading">{{head}}</th>
      </tr>
    </thead>
    <tbody>
      <tr ng-repeat="row in data">
        <td ng-repeat="content in row" ng-bind-html-unsafe="content"></td>
      </tr>
    </tbody>
  </table>

函数createTable（h，c）{
变量框架、表、头、体；
frag=document.createDocumentFragment（）；
table=document.createElement（“表”）；
head=createHeader（h）；
body=createContent（c）；
表2.儿童（头）；
表2.儿童（身体）；
框架附件（表）；
返回帧克隆节点（真）；
}
函数createHeader（数据）{
var thead，rowEl，col，colEl，text，i，j；
thead=document.createElement（“thead”）
rowEl=document.createElement（“tr”）；
对于（i=0，j=data.length；i
我实际上在日常开发中使用，因此您可以：

裸HTML表：

<table id="myTable"></table>

然后您需要一个数据源。Mustach需要一个对象来执行此操作：

var data = {
  rows : [
    {
      items : ['hello1','world1']
    },{
      items : ['hello2','world2']
    }
  ]
}

渲染：

var usableHTML = Mustache.render(template,data);

然后可以将
usableHTML
附加到表中

document.getElementById('myTable').innerHTML = usableHTML;

摘自本帖：

insertRow会更好。它受到A级浏览器的支持，不那么冗长，API更干净

insertRow可能被认为更可靠，因为它是DOM

在DOM之外操作时，appendChild方法在所有经过测试的浏览器（IE6/7、FF3、Chrome2、Opera9）中始终更快（尽管只是略微加快），但在尝试修改文档中的表时（更常见的做法）速度要慢得多

换句话说：一定要使用insertRow

我个人的观点是：1.方法更清晰，使用本地方法
我想使用第二种方法。不过别忘了
tbl.appendChild（tblBody）
！有第三种方法：直接将表的代码写入HTML@vol7ron接得好，已经修好了。在演示中，我还使表不那么难看（耶，引导！）如果你有
的实际证据，只需将字符串放入innerHTML中，你就会获得最好的性能。
，我很乐意看到它。我在过去看到的任何jsPerf（我理解这并不总是最好的例子）都会有所不同（在浏览器之间存在一些不一致）。从技术上讲，使用
documentFragment
很可能是最快的，使用
document.createElement
和
.appendChild（）
并不落后，但这些方法之间的差距正在缩小。我不知道使用像
map
这样的较慢的方法会如何让它变得“快”@Ian，quirksmode对DOM和innerHTML做了很大的比较。近几年来，这一差距一直在缩小，但仍然不太明显。我编写的示例很简单，但当然，函数会增加开销。DOM操作是函数加上额外的DOM开销。性能的理想情况是为要呈现的每个元素预编译JavaScript模板。你在开玩笑吧？你真的在引用那个链接？使用IE 5-8和FF 2-3？那几乎不值得参考。正如我所说，jsperf倾向于表现出一种良好的共识，即
innerHTML
是最慢的。jQuery之所以使用
documentFragment
sI，是有原因的，如果您想在这个答案中添加一个documentFragment示例，或者创建一个自己的示例，我会很乐意。
newTable = createTable(heading, data);
document.body.appendChild(newTable);

function createTable(h, c) {
    var frag, table, head, body;

    frag = document.createDocumentFragment();
    table = document.createElement("table");
    head = createHeader(h);
    body = createContent(c);

    table.appendChild(head);
    table.appendChild(body);

    frag.appendChild(table);

    return frag.cloneNode(true);
}

function createHeader(data) {
    var thead, rowEl, col, colEl, text, i, j;

    thead = document.createElement("thead")
    rowEl = document.createElement("tr");

    for (i = 0, j = data.length; i < j; i++) {
        col = data[i];
        colEl = document.createElement("td");
        text = document.createTextNode(col);
        colEl.appendChild(text);
        rowEl.appendChild(colEl);
    }

    thead.appendChild(rowEl);

    return thead;
}

function createContent(data) {
    var content, row, rowEl, col, colEl, text, i, j, k, l;

    content = document.createElement("tbody");

    for (i = 0, j = data.length; i < j; i++) {
        row = data[i];
        rowEl = document.createElement("tr");
        for (k = 0, l = row.length; k < l; k++) {
            col = row[k];
            colEl = document.createElement("td");
            text = document.createTextNode(col);
            colEl.appendChild(text);
            rowEl.appendChild(colEl);
        }
        content.appendChild(rowEl);
    }

    return content;
}

<table id="myTable"></table>

<script type="text/template" id="rowTemplate">
  {{#rows}}
  <tr>
    {{#items}}
    <td>
      {{.}}
    </td>
    {{/items}}
  </tr>
  {{/items}}
</script>

var template = document.getElementById('rowTemplate').innerHTML;

var data = {
  rows : [
    {
      items : ['hello1','world1']
    },{
      items : ['hello2','world2']
    }
  ]
}

var usableHTML = Mustache.render(template,data);

document.getElementById('myTable').innerHTML = usableHTML;