Trying to insert var newBtn = document.createElement('td'); and 2 buttons appear

#1

Hello,
I’m trying to add a button at the end of the table but in my case it seems to add 2 buttons in the table/cell, one with caption and one thats empty.
any ideas as to whats happening?
and what is this code doing: <TD> == $0?

javas

<script> 
               var person = [{irstName:"John", lastName:"Doe", age:46}, 
                              {firstName:"jack1", lastName:"jack2", age:47},
                              {firstName:"Steve1", lastName:"Steve2", age:48}];
               var legArray = person.length;
               var divTest = document.getElementById("testTable"); 
              // var divTest = document.getElementsByTagName("#testTable"); 
               var tbl = document.createElement("table");
               var tblBody = document.createElement("tbody");

               person.forEach(function(value) {
                    var row = document.createElement("tr");

                    for (var o in value) { 
                         // console.log(value[o]);
                         //var newTodo.textContent = 'Do homework';
                         var cell = document.createElement("td");
                         var cellText = document.createTextNode(value[o]); 
                         cell.appendChild(cellText);
                         row.appendChild(cell);                                                               
                    }
                    var newBtn = document.createElement('td');
                    newBtn.innerHTML = "<button type='submit' value='test'> button <button>";  
                    row.appendChild(newBtn);                   

                    tblBody.appendChild(row);
                    console.log(tblBody);
               });
               tbl.appendChild(tblBody);
               divTest.appendChild(tbl);
               tbl.setAttribute("border", "2");
          </script>
#2

Hi @robin01, you forgot the slash for the closing button tag so you’re creating 2 buttons; the browser just guesses how to reasonably correct the markup.

#3

wow… I totally missed that…lol
thanks for the assistance.

#4

Hello m3g4p0p,

with the same script im trying to add a value to the button property…i been playing with it all day and cant seem to get it to work… maybe you can. code is located at
https://codepen.io/tcgl/pen/KLmyRV?editors=1111

if you can help, great.
Thanks

#5
row.appendChild(subBtn2);

not correct. Should be…

row.appendChild(newBtn);
newBtn.appendChild(subBtn2);

And actually better to call TD-element ‘cell’ or something like