An error occur when I use appendChild ("<br>") in a genuine exist reference

Question

This is a beginner's question...

I want to write some code to initialize a bunch of seats picture in my web page,

create and set attribute to them, and make them change line every 9 seats (4 rows, and for every row it has 9 seats), here is the code

function initSeats() {

            var seatsDiv = document.getElementById("seats");

            //Initialize the appearence of all seats
            for (var i = 0; i < seats.length; i++) {
                for (var j = 0; j < seats[i].length; j++) {
                    var currentSeatIndex = i * seats[i].length + j;
                    if (seats[i][j]) {
                        //if current seat is available(true), create a new IMG element and set some attributes;
                    } else {
                        //if current seat is unavailable(true), create a new IMG element and set some attributes;
                    }
                }
                seatsDiv.appendChild("<br>");//here is the problem
            }
        }

what I want to do is when one of the outer loop finished, add a
at the end,

But then I got a "NotFoundError" in Chrome that looks like the node seatsDiv doesn't exist

so after all only one row of seats were successfully initialized.

Is appendChild supposed to append anything at the position? Or should I use some other method?

Answer 1

appendChild expects an HTMLElement rather than a string, try switching to:

seatsDiv.appendChild(document.createElement("br"));