错误：无法读取未定义的属性“ replaceChild”

Question

I am trying to update a table to display the new row when I save a record. My code currently loads the entire table again along with the existing table. For example, I'm seeing rows 1-15, then I add a row and see 31 total rows, rows 1-15 and then rows 1-16 all in the same table.

Here is my code for the replace function which calls my original load function when it's time to replace the data. I based this off another example I saw.

function replaceData() {
    var old_tbody = document.getElementsByTagName('tbody');
    var new_tbody = document.createElement('tbody');
    loadData(new_tbody);
    old_tbody.parentNode.replaceChild(new_tbody,old_tbody);

    console.log("Data replaced");
}

I'm clearly not a JavaScript expert so any help would be appreciated.

Answer 1

getElementsByTagName function returns a HTML Collection (array-like object), that means that you have to specify which item of that array you want (even if there is only one item).

So your code basically should be:

var old_tbody = document.getElementsByTagName('tbody')[0];

Or you can use querySelector which returns only the first matched element. Like this:

var old_tbody = document.querySelector('tbody');

Answer 2

getElementsByTagName actually returns a collection of elements, so parentNode doesn't work. To get the actual DOM node you would do the following.

var old_tbody = document.getElementsByTagName('tbody')[0];