Using Javascript methods append and appendChild to insert row and cells into a HTML table

Question

Right. So guys, I'm stuck with a simple problem that I can't for the life of me figure out. I'm trying to insert a new row (using response data from an AJAX call) at the end of a Bootstrap table using JavaScript. I'm using a simple function like so;

                function insertRow(data) {

                    let tbody = document.querySelector('tbody');
                    let spacer = document.createElement('tr');
                    let tr = document.createElement('tr');

                    // append rows to table
                    tbody.appendChild(spacer);
                    tbody.appendChild(tr);

                    // apply styles                    
                    tr.className = 'rounded-3 card-body shadow-sm reg-rows';
                    spacer.className = 'spacer';
                    spacer.style.height = '6px';

                    let id_input = document.createElement("input");

                    spacer.appendChild(id_input);
                    id_input.value = `${data.identifier}`;
                    id_input.name = "keys_array[]";
                    id_input.type = "hidden";

                    let cells_array = new Array();

                    // create cells
                    var td_id, td_ba, td_code, td_num;
                    td_id = td_ba = td_code = td_num = document.createElement('td');

                    // append cells to row                    
                    tr.append(td_id, td_ba, td_code, td_num);

                    // add cells to array
                    cells_array.push(td_id, td_ba, td_code, td_num);

                    Array.prototype.slice.call(cells_array)
                        .forEach(function(cell) {
                            cell.className = "p-1 border-0";
                            tr.appendChild(cell);
                        });

                    td_status.classList.add("rounded-end");

                    let div = document.createElement("div");

                    let input = document.createElement("input");
                    input.className = "form-check-input position-static";
                    input.name = "some_action[]";
                    input.type = "checkbox";

                    div.appendChild(input);

                    td_status.appendChild(div);


                    // write text to cells
                    td_id.innerHTML = `${data.id}`;
                    td_ba.innerHTML = `${data.ba}`;
                    td_code.innerHTML = `${data.code}`;
                    td_num.innerHTML = `${data.num}`;
  
                }

The problem is that only the last cell (in this case td_num) gets inserted into the newly created row when I call the function, and it is inserted as the very first one.

I've tried using appendChild to append each cell individually to the new row but that didn't either.

I've even tried to change the order in which the cells are created and appended but that didn't work. What could I be doing wrong? Thanks.

Answer 1

You are creating 3 references for a one and same Element in this line:

td_id = td_ba = td_code = td_num = document.createElement('td');

Meaning, the only document.createElement('td') created here can be called with td_id, td_ba and td_code. You are not creating 3 td's here, only one with 3 references.

If you want to create 3 elements you need to create them for every variable

[ td_id, td_ba, td_code ].map(myVarRef => myVarRef = document.createElement('td'))