JavaScriptのinsertBeforeに関するエラー　Uncaught TypeError: Cannot read property 'insertBefore' of undefined

前提・実現したいこと

ボタンを押すと新しい列が追加される表を作りたく　JavaScriptでtr要素を作り、それをHTMLへと出力する関数を作ろうと思ったのですが上手くいきませんでした。2時間位調べて、少しは前進したのですが解決には至らず、今回質問させていただきました。

ソースコードはエラーが起きた部分を簡易的に再現したものです。

発生している問題・エラーメッセージ

エラーメッセージ
 Uncaught TypeError: Cannot read property 'insertBefore' of undefined
    at index.html:36

該当のソースコード

HTML
1<!DOCTYPE html>
2<html lang="ja" >
3  <head>
4    <meta charset="utf-8">
5    <title>th</title>
6  </head>
7  <body>
8
9    <table>
10      <tr>
11        <th>商品名</th>
12        <th>値段</th>
13      </tr>
14
15      <tr>
16        <td>商品A</td>
17        <td>〇〇円</td>
18      </tr>
19
20      <tr>
21        <td>商品B</td>
22        <td>〇〇円</td>
23      </tr>
24
25      <!-- ここに新しく作った tr を入れたい -->
26
27      <tr id="sum">
28        <td>計</td>
29        <td>〇〇円</td>
30      </tr>
31    </table>
32
33    <script>
34      const tr = document.createElement('tr');
35      const sum = document.getElementById("sum");
36      document.table.insertBefore(tr, sum);
37    </script>
38  </body>
39</html>
40

試したこと

　const sum = document.getElementById("sum"); ではなく　
const sum = document.querySelector('tr[id="sum"]');　を試したりしましたが、解決しませんでした。

また、色々試してスクリプト部分を以下のようにした場合はエラーが発生しませんでした。
実現したいスクリプトではありませんが一応掲載しておきます。
const tr = document.createElement('tr');
const table = document.querySelector('table');
document.body.insertBefore(tr, table);

行動規範の内容に同意します

回答1件

ベストアンサー

document.table は undefined です。
正しくは以下の通り。

JavaScript
1const tr = document.createElement('tr');
2const sum = document.getElementById('sum');
3const table = sum.parentNode;
4table.insertBefore(tr, sum);