如何使用innerHTML在表格顶部插入新行 不使用insertRow(0)方法

核心逻辑非常简单：你之前用的myTable.innerHTML += row是把新行内容追加到原有内容的末尾，只要把拼接顺序反过来，把新行的字符串放在原有innerHTML的前面再赋值，就能实现插入到顶部的效果。

另外建议直接操作表格的<tbody>元素，而非整个标签，避免后续出现表格结构异常的问题，完整修改后的代码如下：

修改后的JS代码 #

data = [{
    "property": "animal",
    "value": "dog"
  },
  {
    "property": "car",
    "value": "porsche"
  },
  {
    "property": "snacks",
    "value": "chips"
  }
]

// 直接获取tbody元素更稳妥
var tableBody = document.querySelector("#myTable tbody")

for (var i = 0; i < data.length; i++) {
  var row = `<tr>
      <td>${data[i].property}</td>
      <td>${data[i].value}</td>
    </tr>`
  // 初始渲染如果要保持原数据顺序从下到上排列，还是用追加即可
  tableBody.innerHTML += row
}

var insertRow = document.getElementById("insertRow")

insertRow.addEventListener("click", function() {
  var row = `<tr>
       <td>property</td>
       <td>value</td>
    </tr>`
  // 把新行拼在原有内容前面，实现插入顶部
  tableBody.innerHTML = row + tableBody.innerHTML
})

极简修改方案 #

如果你不想调整原有DOM选择逻辑，只改一行代码也可以实现效果，直接把新增行的赋值语句：

myTable.innerHTML += row

改成：

myTable.innerHTML = row + myTable.innerHTML

即可，只是操作整个table的innerHTML可能会丢失部分表格的内置属性，更推荐操作tbody的方案。

内容的提问来源于stack exchange，提问作者ICoded