html文件中的代码如下:
<html>
<script type="text/javascript">
var records=[{"name":"Fred","id":"123"},{"name":"Jim","id":"456"}];
</script>
<table id="tb1">
<tr id="row1">
<td style="background-color:gray" id="name">name</td><td style="background-color:gray" id="id">id</td>
</tr>
<tr id="row2"><td>shouldn't be added here</td><td>neither here</td></tr>
</table>
</html>
我想用纯javascript添加row1和row2之间的记录内容。(没有任何第三方javascript框架)我该怎么办？
最佳答案
您不是添加到“标签”，而是添加到元素。
一般情况下，您可以通过 document.createElement 创建元素(或者通过将包含 HTML 的字符串分配给现有元素的 innerHTML 属性)。
您可以使用 appendChild 将元素添加为其他元素的子元素或insertBefore .
例如，您可以在表格中的 id="row2" 之前添加包含两个表格单元格的行:
var newRow = document.createElement('tr');
newRow.appendChild(document.createElement('td')); // The first cell
newRow.appendChild(document.createElement('td')); // The second cell
var row2 = document.getElementById("row2");
row2.parentNode.insertBefore(newRow, row2); // Insert it
但是，如 Heitor points out ，对于表，您可以使用特定的方法来代替，这些方法不太冗长:
-
insertRow在 table 和 tbody/thead 元素上 -
insertCell在行元素上
这是上面使用 insertCell 的代码:
var newRow = document.createElement('tr');
newRow.insertCell(-1); // The first cell
newRow.insertCell(-1); // The second cell
var row2 = document.getElementById("row2");
row2.parentNode.insertBefore(newRow, row2); // Insert it
我们也可以使用insertRow:
var row2 = document.getElementById("row2"); // Get existing row
var newRow = row2.parentNode.insertRow(row2.rowIndex); // Create and insert new row
newRow.insertCell(); // The first cell
newRow.insertCell(); // The second cell
...但是我们会重复对显示的 DOM 进行更改(添加一个空白行，然后添加一个单元格，然后添加另一个单元格)，如果可能的话最好避免这种情况。在前两个示例中，我们创建了行并添加了其单元格，然后将整个结构添加到 DOM，执行一个实时 DOM 操作。
<小时/>DOM API 可能很冗长并且有点笨拙，并且它的实现可能会因浏览器而异(尽管以上所有内容都是可靠的)。显然，您可以直接使用它，但您也可以使用几个优秀的 JavaScript DOM 操作库中的任何一个来为您整理一些浏览器兼容性的内容，并获得许多有用的实用功能。
关于javascript - 如何在纯javascript中动态添加<tr>标签到<table>标签？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/21117850/