insertBefore で "not a child of this node."になってしまう

Question

ボタンを押したら、テーブルの行を追加するJavascriptを作成しています。下記のような流れになっています。

1. ボタンをクリック
2. addButton() を実行
3. 新要素actionElm、親要素、挿入場所直前の要素を取得
4. insertBefore の処理
5. エラー

ボタンをクリックするとエラーが発生します。
test_js.html:73 Uncaught DOMException: Failed to execute 'insertBefore' on 'Node': The node before which the new node is to be inserted is not a child of this node.
新しいノードが挿入される前のノードは、このノードの子ではない。

Chromeの検証で追いかけてみると、親要素<table> actionTable、親要素の中に子要素<tr> addButton は確認できるので問題がなさそうに思えます。

エラーが発生するのは何が原因と考えられるでしょうか？
よろしくお願いします。

<table class="table" id="actionTable">
    <tr>
        <th scope="col" style="width:5%">列１</th>
        <th scope="col" style="width:10%">列２</th>
        <th scope="col" style="width:60%">列３</th>
        <th scope="col" style="width:25%">列４</th>
    </tr>
    <tr>
        <td>
            <div>
                <input type="checkbox" name="data[2][delete]">
            </div>
        </td>
        <td>
            <input type="hidden" name="data[2][id]" value="7">
            <input type="text" name="data[2][name]" value="new4">
        </td>
        <td><input type="text" name="data[2][url]" value="https://music.youtube.com"></td>
        <td><input type="text" name="data[2][memo]" value="memoemoemo"></td>
    </tr>
    <tr>
        <td>
            <div>
                <input type="checkbox" name="data[3][delete]">
            </div>
        </td>
        <td>
            <input type="hidden" name="data[3][id]" value="8">
            <input type="text" name="data[3][name]" value="new3">
        </td>
        <td><input type="text" name="data[3][url]" value="https://youtube.com"></td>
        <td><input type="text" name="data[3][memo]" value="memoemoemo"></td>
    </tr>

    <tr id="addButton">
        <td colspan="4">
            <button type="button" onclick="addAction()">追加</button>
        </td>
    </tr>
</table>

<script>
    function addAction() {
        let actionElm = document.getElementById('actionTemplate').content.cloneNode(true);
        let actionTable = document.getElementById('actionTable');
        let addButton = document.getElementById('addButton');
        actionTable.insertBefore(actionElm, addButton);
    }
</script>

<template id="actionTemplate">
    <tr>
        <td>
            <div class="custom-control custom-checkbox">
                <input type="checkbox" name="data[-1][delete]">
            </div>
        </td>
        <td>
            <input type="hidden" name="data[-1][id]" value="-1">
            <input type="text" name="data[-1][name]" value="">
        </td>
        <td><input type="text" name="data[-1][text]" value=""></td>
        <td><input type="text" name="data[-1][memo]" value=""></td>
    </tr>
</template>

Answer 1

テーブルの落とし穴ですね

actionTable.querySelector('tbody').insertBefore(actionElm, addButton);

とtrはtableの直下にないのです
単純に処理するならこれでよいでしょう

addButton.before(actionElm);

Comments

[退会済みユーザー]

なるほどです。コード上は無くても内部的には自動的に生成されているのですね。
tableタグは<tbody>が無くても動作するので省略していました。
教えていただいたコードでうまく動作しました。
ありがとうございます。

Answer 2

Google Chrome の DevTools の Elements タブを見るとわかりますが、実は <tr> の親は <table> ではありません。<tbody> が間に存在します。ですので、

addButton.parentNode.insertBefore(actionElm, addButton);

や

addButton.insertAdjacentElement('beforebegin', actionElm);

などとするとよいでしょう。

Comments

[退会済みユーザー]

ありがとうございます。
確認しました。本当にコードには書いていないのに<tbody>がありました。
これは気が付きませんでした。
他の方法もご提示いただきありがとうございます。