0

質問失礼します。

    table = document.createElement("table");
    
    ... table作成処理 ...    

    const newTable = table.cloneNode(true);
    const oldTable = document.getElementById("テーブルID");
    const parent = oldTable.parentNode;
    parent.replaceChild(oldTable,newTable);

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

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

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

エラー内容

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

追加で試したこと

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

2 件の回答 2

1

少なくともこの行:

    parent.replaceChild(docTable,newTable);

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

        parent.replaceChild(newTable, docTable);

Node.replaceChild()

...
Note the idiosyncratic argument order (new before old). ChildNode.replaceWith() may be easier to read and use.


Syntax

parentNode.replaceChild(newChild, oldChild);

3
  • ありがとうございます! お恥ずかしい限りです(T_T)問題なく動作しました! 本当にありがとうございます!! Commented 2020年7月26日 13:39
  • MDNのドキュメントに the idiosyncratic argument order (特殊な引数の順序)とあるように、「これは間違いやすい」と言う認識はみんなにあるようです。そこに示されているようにdocTable.replaceWith(newTable);なんて構文を使えば間違えにくいし、parentにアクセスする必要もなくなりますね。対応ブラウザが限定されてしまいますが。
    – OOPer
    Commented 2020年7月26日 21:37
  • ありがとうございます!replaceWith。確かに直感的ですね。なぜ親要素を取得しなければいけないだ。という思いが実はありましたが、やはり同じ思いの方は多くいらっしゃるんですね。対応ブラウザも、企業アプリケーションや、ターゲットを絞った開発の時は、取り入れたいなと思います。本当に詳しくありがとうございました!質問してよかったです! Commented 2020年7月30日 14:08
0

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

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

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。