質問失礼します。
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で宣言しても同じエラーでした。