ReplaceChild does not work well.

Excuse me for asking you a question.

table= document.createElement("table");
    
    ... table creation process...    

    const newTable=table.cloneNode(true);
    constoldTable= document.getElementById("Table ID");
    const parent = oldTable.parentNode;
    parent.replaceChild(oldTable, newTable);

I think this will work fine, but I get an error.
I ran the step in Chrome validation, but I couldn't find a problem before I reached replaceChild.What's wrong with you?

let todoId=0;

const table = document.createElement("table");
table.id= "TodoTable"

const body=table.createTBody();
const head=table.createTHead();
const low=head.insertRow();

for(leti=0;i<4;i++){
    row.insertCell();
}

const cells=row.getElementsByTagName("td");

cells.item(0).innerText="id";
cells.item(1).innerText="comment";
cells.item(2).innerText="status";
cells.item(3).innerText="ope";

constaddTodo=()=>{

    todo = {
        id: todoId++,
        content: document.getElementById("comment").value,
        status: "working"
    }

    constrow=body.insertRow();

    for(leti=0;i<4;i++){
        row.insertCell();
    }

    constcells=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>
    <metacharset="utf-8"/>
    <title>ToDo List</title>
    <meta name="description" content="ToDo List"/>
    <meta name="author" content="Taiga Morikawa"/>
    <link rel="shortcut icon" href="fabicon.ico"/>
    <script src="https://stacksnippets.net/js"></script>

    <style>
        theyad{
            font-size: 1.2em;
            font-weight:bold;
        }
    </style>
</head>

<body>
    <h1>ToDo list</h1>
    <divid="filter">
        <input type="radio" name="filter" value="all">all
        <input type="radio" name="filter" value="working">Working
        <input type="radio" name="filter" value="complete">completed
    </div>
    <divid="todoList">
        <table id="TodoTable">
            <thead>
                <tr>
                    <td>ID</td><Comments>/td><State>/td>
                </tr>
            </thead>
            <tbody id="TodoBody">
            </tbody>
        </table>
    </div>
    <h2>Add New Task</h2>
    <table>
        <tr>
            <td><input id="comment" type="text"/></td>
            <td><input type="button" onclick="addTodo();"value="add">/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.

I was wondering if the reference address would change when I replaced it with const, so I declared the same error with newTable, oldTable, parent, let, var.

javascript

2022-09-30 14:10

2 Answers

At least this line:

parent.replaceChild(docTable, newTable);

The order of arguments is probably the opposite.

parent.replaceChild(newTable, docTable);

Node.replaceChild()

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

parentNode.replaceChild (newChild, oldChild);

2022-09-30 14:10

let todoId=0;

const table = document.createElement("table");
table.id= "TodoTable"

const body=table.createTBody();
const head=table.createTHead();
const low=head.insertRow();

for(leti=0;i<4;i++){
    row.insertCell();
}

const cells=row.getElementsByTagName("td");

cells.item(0).innerText="id";
cells.item(1).innerText="comment";
cells.item(2).innerText="status";
cells.item(3).innerText="ope";

constaddTodo=()=>{

    todo = {
        id: todoId++,
        content: document.getElementById("comment").value,
        status: "working"
    }

    constrow=body.insertRow();

    for(leti=0;i<4;i++){
        row.insertCell();
    }

    constcells=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>
    <metacharset="utf-8"/>
    <title>ToDo List</title>
    <meta name="description" content="ToDo List"/>
    <meta name="author" content="Taiga Morikawa"/>
    <link rel="shortcut icon" href="fabicon.ico"/>
    <script src="https://stacksnippets.net/js"></script>

    <style>
        theyad{
            font-size: 1.2em;
            font-weight:bold;
        }
    </style>
</head>

<body>
    <h1>ToDo list</h1>
    <divid="filter">
        <input type="radio" name="filter" value="all">all
        <input type="radio" name="filter" value="working">Working
        <input type="radio" name="filter" value="complete">completed
    </div>
    <divid="todoList">
        <table id="TodoTable">
            <thead>
                <tr>
                    <td>ID</td><Comments>/td><State>/td>
                </tr>
            </thead>
            <tbody id="TodoBody">
            </tbody>
        </table>
    </div>
    <h2>Add New Task</h2>
    <table>
        <tr>
            <td><input id="comment" type="text"/></td>
            <td><input type="button" onclick="addTodo();"value="add">/td>
        </tr>
    </table>
</body>

</html>

2022-09-30 14:10

If you have any answers or tips

Popular Tags

python x 4647

android x 1593

java x 1494

javascript x 1427

c x 927

c++ x 878

ruby-on-rails x 696

php x 692

python3 x 685

html x 656