如何使用 appendChild 附加多个元素

Question

I have one cell (columns), in which I want to add two buttons. This is what I created:

var editbtn = document.createElement('button');
editbtn.type= "button";
editbtn.className= "editbtn";
editbtn.id= "edit-button-"+(i+1);
editbtn.innerHTML= "Edit";
editbtn.onclick = editRow.bind(this, i + 1); 

var savebtn = document.createElement('button');      
savebtn.type= "button";
savebtn.className= "savebtn";
savebtn.id= "save-button-"+(i+1);
savebtn.innerHTML= "Save";
savebtn.onclick = saveRow.bind(this, i + 1);

cell3.appendChild(editbtn); 
cell3.appendChild(savebtn); 

However, only the savebtn appears. How to append two buttons or more in the same column?

Answer 1

You can easily do that with an array and a for loop:

var names = ['edit', 'save'];
var editRows = [editRow, saveRow];

for ( var i = 0; i < names.length; i++ )
{
    var btn       = document.createElement('button');
    btn.type      = "button";
    btn.className = names[i] + "btn";
    btn.id        = names[i] + "-button-" + (i+1);
    btn.innerHTML = names[i];
    btn.onclick   = editRows[i].(this, i + 1);

    cell3.appendChild( editbtn );
}

You can add as many button as you want then just updating names and editRows accordingly, no need to touch the for loop.