

質問失礼します。

[code]

        table = document.createElement("table");
        
        ... table作成処理 ...    
    
        const newTable = table.cloneNode(true);
        const oldTable = document.getElementById("テーブルID");
        const parent = oldTable.parentNode;
        parent.replaceChild(oldTable,newTable);
    
[/code]

これで問題なく動作すると思っているのですが、エラーが出てしまいます。  
Chromeの検証でステップ実行を行ったのですが、replaceChildに到達するまでに問題が見つけられませんでした。どこがまずいのでしょう。

[code]

    let todoId = 0;
    
    const table = document.createElement("table");
    table.id = "TodoTable"
    
    const body = table.createTBody();
    const head = table.createTHead();
    const hrow = head.insertRow();
    
    for (let i = 0; i < 4; i++) {
        hrow.insertCell();
    }
    
    const cells = hrow.getElementsByTagName("td");
    
    cells.item(0).innerText = "id";
    cells.item(1).innerText = "comment";
    cells.item(2).innerText = "status";
    cells.item(3).innerText = "ope";
    
    const addTodo = () => {
    
        todo = {
            id: todoId++,
            content: document.getElementById("comment").value,
            status: "working"
        }
    
        const row = body.insertRow();
    
        for (let i = 0; i < 4; i++) {
            row.insertCell();
        }
    
        const cells = row.getElementsByTagName("td");
    
        cells.item(0).innerText = todo.id;
        cells.item(1).innerText = todo.content;
        cells.item(2).innerText = todo.status;
        cells.item(3).innerText = "delete";
    
        const newTable = table.cloneNode(true);
        const docTable = document.getElementById("TodoTable");
        const parent = docTable.parentNode;
        parent.replaceChild(docTable, newTable);
    
    }
[/code]

[code]

    <!DOCTYPE html>
    <html lang="ja">
    
    <head>
        <meta charset="utf-8" />
        <title>ToDoリスト</title>
        <meta name="description" content="ToDoリスト" />
        <meta name="author" content="Taiga Morikawa" />
        <link rel="shortcut icon" href="fabicon.ico" />
        <script src="https://stacksnippets.net/js"></script>
    
        <style>
            thead{
                font-size: 1.2em;
                font-weight: bold;
            }
        </style>
    </head>
    
    <body>
        <h1>ToDoリスト</h1>
        <div id="filter">
            <input type="radio" name="filter" value="all">すべて
            <input type="radio" name="filter" value="working">作業中
            <input type="radio" name="filter" value="complete">完了
        </div>
        <div id="todoList">
            <table id="TodoTable">
                <thead>
                    <tr>
                        <td>ID</td><td>コメント</td><td>状態</td>
                    </tr>
                </thead>
                <tbody id="TodoBody">
                </tbody>
            </table>
        </div>
        <h2>新規タスクの追加</h2>
        <table>
            <tr>
                <td><input id="comment" type="text" /></td>
                <td><input type="button" onclick="addTodo();" value="追加"></td>
            </tr>
        </table>
    </body>
    
    </html>
[/code]

## エラー内容

[code]

    Uncaught NotFoundError: Failed to execute 'replaceChild' on 'Node': The node to be replaced is not a child of this node.
    
[/code]

## 追加で試したこと

  * constだとreplaceしたときに参照アドレスが変わるのか？と思い、newTable, oldTable, parentすべて、let, varで宣言しても同じエラーでした。


CC BY-SA 4.0
2020-07-26T10:36:56.680
68984
2020-07-26T13:51:19.447
2020-07-26T13:49:54.003
41254
41254
question
javascript
replaceChildがうまく動きません。


少なくともこの行:

[code]

        parent.replaceChild(docTable,newTable);
    
[/code]

は、引数の順番が逆なのではないでしょうか。

[code]

            parent.replaceChild(newTable, docTable);
    
[/code]

[Node.replaceChild()](https://developer.mozilla.org/en-
US/docs/Web/API/Node/replaceChild)

> ...  
>  Note the idiosyncratic argument order (new before old).
> ChildNode.replaceWith() may be easier to read and use.
>
> * * *
>
> ## Syntax
>
> `parentNode.replaceChild(newChild, oldChild);`


CC BY-SA 4.0
2020-07-26T13:03:00.730
68989
2020-07-26T13:03:00.730
13972
68984
answer

[code]

    let todoId = 0;
    
    const table = document.createElement("table");
    table.id = "TodoTable"
    
    const body = table.createTBody();
    const head = table.createTHead();
    const hrow = head.insertRow();
    
    for (let i = 0; i < 4; i++) {
        hrow.insertCell();
    }
    
    const cells = hrow.getElementsByTagName("td");
    
    cells.item(0).innerText = "id";
    cells.item(1).innerText = "comment";
    cells.item(2).innerText = "status";
    cells.item(3).innerText = "ope";
    
    const addTodo = () => {
    
        todo = {
            id: todoId++,
            content: document.getElementById("comment").value,
            status: "working"
        }
    
        const row = body.insertRow();
    
        for (let i = 0; i < 4; i++) {
            row.insertCell();
        }
    
        const cells = row.getElementsByTagName("td");
    
        cells.item(0).innerText = todo.id;
        cells.item(1).innerText = todo.content;
        cells.item(2).innerText = todo.status;
        cells.item(3).innerText = "delete";
    
        const newTable = table.cloneNode(true);
        const docTable = document.getElementById("TodoTable");
        const parent = docTable.parentNode;
        parent.replaceChild(newTable, docTable);
    
    }
[/code]

[code]

    <!DOCTYPE html>
    <html lang="ja">
    
    <head>
        <meta charset="utf-8" />
        <title>ToDoリスト</title>
        <meta name="description" content="ToDoリスト" />
        <meta name="author" content="Taiga Morikawa" />
        <link rel="shortcut icon" href="fabicon.ico" />
        <script src="https://stacksnippets.net/js"></script>
    
        <style>
            thead{
                font-size: 1.2em;
                font-weight: bold;
            }
        </style>
    </head>
    
    <body>
        <h1>ToDoリスト</h1>
        <div id="filter">
            <input type="radio" name="filter" value="all">すべて
            <input type="radio" name="filter" value="working">作業中
            <input type="radio" name="filter" value="complete">完了
        </div>
        <div id="todoList">
            <table id="TodoTable">
                <thead>
                    <tr>
                        <td>ID</td><td>コメント</td><td>状態</td>
                    </tr>
                </thead>
                <tbody id="TodoBody">
                </tbody>
            </table>
        </div>
        <h2>新規タスクの追加</h2>
        <table>
            <tr>
                <td><input id="comment" type="text" /></td>
                <td><input type="button" onclick="addTodo();" value="追加"></td>
            </tr>
        </table>
    </body>
    
    </html>
[/code]


CC BY-SA 4.0
2020-07-26T13:51:19.447
68991
2020-07-26T13:51:19.447
41254
68984
answer