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

Question

I have an HTML table on any site:

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

I want to do some calculation and return a number with my written chrome extension with this code:

    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);
}

but problem is previous tr tag not closing and make collession like this :

<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>

I want to make row like this code :

    <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

Try the following modified version of insertAfter():

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

Here we use insertAdjacentElement() to insert the new table row after the end of the first row, which would be after the closing </tr> tag.

More information can be found here: Element.insertAdjacentElement()