Question

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框架）我该怎么办？

Answer 1

您不会添加到“标记”，而是添加到元素。

在一般情况下，您可以通过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和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操作库中的任何一个来获取为您量身定制的浏览器兼容性内容，并获得许多有用的实用程序功能。

Answer 2

使用insertRow方法，干净又精确！

var row = table.insertRow(0); // to insert in the top OR
var row = table.insertRow(N); // to insert in the (N+1)-th line of the table OR
var row = table.insertRow(-1); // to insert in the bottom

如何在纯javascript中动态添加标签？<table> </table>

2 个答案: