Update an element created via appendChild

Question

I created a table on my document using: document.body.appendChild(table)

now every time I make a change on my table I want to run

document.body.removeChild(table)
document.body.appendChild(table)

so that the content of the table on my page is updated. This does however not work in the first place as I get

app.js:75 Uncaught DOMException: Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node.

as an error message, and it also seems like a really clunky solution to the problem.

But first perform a minimum of research google.nl/search?q=dom+update+html+table — mplungjan
– mplungjan, Commented Oct 16, 2018 at 16:57
I know I tried but I'm fairly new so I dont always find the correct key terms :) — cubefox
– cubefox, Commented Oct 18, 2018 at 8:32

T.J. Crowder · Accepted Answer · 2018-10-16 16:59:40Z

now every time I make a change on my table I want to run...so that the content of the table on my page is updated

There's no need to do that. Just modify the table. It's an object in the DOM; modifications to it are rendered by the browser. This is fundamental to how the DOM works.

var table = document.createElement("table");
var tbody = document.createElement("tbody");
table.appendChild(tbody);
document.body.appendChild(table);
var timer = setInterval(function() {
    // This modifies the existing table
    tbody.insertAdjacentHTML(
        "beforeend",
        "<tr><td>" + tbody.children.length + "</td></tr>"
    );
    if (tbody.children.length == 5) {
        clearInterval(timer);
    }
}, 500);

vijay krishna · Accepted Answer · 2018-10-16 16:55:21Z

0

Your appended table is returned by appendChild. You can use it to modify in future.

answered Oct 16, 2018 at 16:55

vijay krishna

5245 silver badges14 bronze badges

Collectives™ on Stack Overflow

Update an element created via appendChild

2 Answers 2

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Related