如何在 JavaScript 中没有 id 的 HTML table 中插入一行

Question

我在任何站点上都有 HTML table：

<table>
<tbody>
    <tr>
        <td>customer</td>
        <td class="ltr" id="e6">2</td>
        <td class="ltr" id="e9">2</td>
    </tr>
</tbody>

我想做一些计算，return 一个数字，我写的 chrome 扩展名是这个代码：

    var tradeActBox = document.createElement('tr');
    var before = document.getElementById('e9');
    tradeActBox.innerHTML =
        '<td>power</td><td>buy</td><td>sell</td>';
    insertAfter(tradeActBox, before);
}

function insertAfter(el, referenceNode) {
    referenceNode.parentNode.insertBefore(el, referenceNode.nextSibling);
}

但问题是之前的 tr 标签没有关闭并像这样进行碰撞：

<tr>
<td>customer</td>
<td class="ltr highlight1" id="e6">2</td>
<td class="ltr highlight1" id="e9">2</td>
<tr>
    <td>power</td>
    <td>buy</td>
    <td>sell</td>
</tr>

我想像下面的代码那样创建行：

    <tr>
    <td>customer</td>
    <td class="ltr highlight1" id="e6">2</td>
    <td class="ltr highlight1" id="e9">2</td>
</tr>

<tr>
    <td>power</td>
    <td>buy</td>
    <td>sell</td>
</tr>

Answer 1

尝试以下 insertAfter() 的修改版本：

function insertAfter(el, referenceNode) {
    referenceNode.parentNode.insertAdjacentElement('afterend', el);
}

这里我们使用 insertAdjacentElement() 在第一行结束后插入新的 table 行，这将在结束 </tr> 标记之后。

可在此处找到更多信息：Element.insertAdjacentElement()

如何在 JavaScript 中没有 id 的 HTML table 中插入一行

How to insert a row in an HTML table without id in JavaScript

html

node.js

dom

simple-html-dom