replaceChildでtable要素を置き換えたい

前提・実現したいこと

javascript
1    const table = document.createElement("table");
2    
3    ... table作成処理 ...    
4
5    const newTable = table.cloneNode(true);
6    const oldTable = document.getElementById("テーブルID");
7    const parent = oldTable.parentNode;
8    parent.replaceChild(oldTable, newTable);

これで問題なく動くと思っているのですが、
調べても同じようなソースコードで問題なく動いてそうな感じです。
何が間違っているのでしょうか。

全体のソースコードを貼り付けておきます。

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

Uncaught DOMException: Failed to execute 'replaceChild' on 'Node': The node to be replaced is not a child of this node.

該当のソースコード

javascript
1let todoId = 0;
2
3const table = document.createElement("table");
4table.id = "TodoTable"
5
6const body = table.createTBody();
7const head = table.createTHead();
8const hrow = head.insertRow();
9
10for (let i = 0; i < 4; i++) {
11    hrow.insertCell();
12}
13
14const cells = hrow.getElementsByTagName("td");
15
16cells.item(0).innerText = "id";
17cells.item(1).innerText = "comment";
18cells.item(2).innerText = "status";
19cells.item(3).innerText = "ope";
20
21const addTodo = () => {
22
23    todo = {
24        id: todoId++,
25        content: document.getElementById("comment").value,
26        status: "working"
27    }
28
29    const row = body.insertRow();
30
31    for (let i = 0; i < 4; i++) {
32        row.insertCell();
33    }
34
35    const cells = row.getElementsByTagName("td");
36
37    cells.item(0).innerText = todo.id;
38    cells.item(1).innerText = todo.content;
39    cells.item(2).innerText = todo.status;
40    cells.item(3).innerText = "delete";
41
42    //const newTable = table.cloneNode(true);
43    //const docDiv = document.getElementById("todoList");
44    //docDiv.appendChild(table);
45
46    const newTable = table.cloneNode(true);
47    const docTable = document.getElementById("TodoTable");
48    const parent = docTable.parentNode;
49    parent.replaceChild(docTable, newTable);
50
51}
52

html
1<!DOCTYPE html>
2<html lang="ja">
3
4<head>
5    <meta charset="utf-8" />
6    <title>ToDoリスト</title>
7    <meta name="description" content="ToDoリスト" />
8    <meta name="author" content="Taiga Morikawa" />
9    <link rel="shortcut icon" href="fabicon.ico" />
10    <script src="testscript.js"></script>
11
12    <style>
13        thead{
14            font-size: 1.2em;
15            font-weight: bold;
16        }
17    </style>
18</head>
19
20<body>
21    <h1>ToDoリスト</h1>
22    <div id="filter">
23        <input type="radio" name="filter" value="all">すべて
24        <input type="radio" name="filter" value="working">作業中
25        <input type="radio" name="filter" value="complete">完了
26    </div>
27    <div id="todoList">
28        <table id="TodoTable">
29            <thead>
30                <tr>
31                    <td>ID</td><td>コメント</td><td>状態</td>
32                </tr>
33            </thead>
34            <tbody id="TodoBody">
35            </tbody>
36        </table>
37    </div>
38    <h2>新規タスクの追加</h2>
39    <table>
40        <tr>
41            <td><input id="comment" type="text" /></td>
42            <td><input type="button" onclick="addTodo();" value="追加"></td>
43        </tr>
44    </table>
45</body>
46
47</html>