Failed to execute 'insertBefore' on 'Node': parameter 1 is not of type 'Node'

Question

How do I troubleshoot this error? What did I do wrong that may have caused this?

In the Chrome console, I get Failed to execute 'insertBefore' on 'Node': parameter 1 is not of type 'Node'. for this line of code

rows[i].parentNode.insertBefore(rows[i + 1], rows[i]);

Which can be found towards the end. I don't know how to fix this error or wht this error is.

console.log("CONNECTED");
var n = 1;
tester(n);

function tester(n){
var switchcount = 0;
var  table = document.getElementById("myTable2");
var monthsArray= ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];//0-11    

var switching = true;
// Set the sorting direction to ascending:
var dir = "asc";
// Check the status of each data cell in a table. 
while(switching){
    switching = false;
    var rows = table.rows;      
    var shouldSwitch;

    for (var i = 1; i < (rows.length-1); i++) { 
        var cellsX = rows[i].getElementsByTagName("TD")[n];
        var cellsY = rows[i + 1].getElementsByTagName("TD")[n];
        var dateX = cellsX.textContent.split(" ");
        var dateY = cellsY.textContent.split(" ");
        var mnthX = dateX[0];
        var mnthY = dateY[0];
        var yearX = dateX[1];
        var yearY = dateY[1];
        var totalX = parseInt(monthsArray.indexOf(mnthX)) + parseInt(yearX);
        var totalY = parseInt(monthsArray.indexOf(mnthY)) + parseInt(yearY);

        if(dir === "asc"){
            if(totalX < totalY) {
                //if so, mark as a switch and break the loop:
                shouldSwitch = true;
                break;
            }
        }else if(dir === "desc"){
            if(totalX > totalY){
                shouldSwitch = true;
                break;
            }
        }
    }
    if(shouldSwitch){
        rows[i].parentNode.insertBefore(rows[i + 1], rows[i]);
        switching = true;
        switchcount++;
    }else{
        if (switchcount === 0 && dir === "asc") {
            dir = "desc";
            switching = true;
        }

    }
}

}

my table that I'm sorting by month and year.

<table id ="myTable2">
    <thead>
        <tr>
            <th>Client</th>
            <th>Due Date</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Smith</td>
            <td>Apr 18</td>
        </tr>
        <tr>
            <td>Kelly</td>
            <td>Jan 18</td>
        </tr>
        <tr>
            <td>Park</td>
            <td>Nov 18</td>
        </tr>
        <tr>
            <td>Mark</td>
            <td>July 19</td>
        </tr>
    </tbody>
</table>

Answer 1

Edited answer:

There is no rows[i+1] when you i is the index of the final element of the row. Your issue is that in the above part of your code, i is the value that i had after the for loop, which is the first value at which the loop test i < (rows.length-1) failed. Therefore, at this point of the code, you should always have i === (rows.length-1), which is not what you want.

A way to avoid this issue of using a loop variable outside of the loop (which is rarely the goal and always hard to read/understand/debug etc) is to write your loops with let instead of var, if you don't mind not supporting older browsers:

for (let i = 1; i < (rows.length-1); i++) {

That way, i won't be defined outside of your loop, and you'll have an easy-to-understand error telling you about it if you happen to try and use i further down your code at a place at which it doesn't mean anything.

---

However there are still other mistakes in the code. In particular, you never actually get out of your while loop. Hopefully you can figure this out by yourself now that you know how to fix the error you had. But if I had to sort a table using plain JavaScript, I would probably:

• Get a list of all the rows in my table,
• Sort these using the build-in sort function with a well-chosen compare function,
• Remove all the rows from the DOM using remove,
• Add them back in the correct order using appendChild in a for loop over the sorted array.

That'd be much easier to read and to debug. Writing your own sort function is a good exercise but if your goal is a web functionality and not practicing algorithmics, don't do it.