将动态创建的按钮拆分为Javascript / HTML行

Question

我正在尝试从头开始创建虚拟键盘。 到目前为止，我有一个函数可以根据给定的字符创建按钮：

function keyButton(char) { //makes a button out of a string/char
  var btn = document.createElement("button"); //create button
  btn.innerText = char; //fill it with char
  btn.onclick = function () { keyStroke(this); };
  return btn;
}

我的代码的第二部分拆分了一个典型的qwerty设置，并使用每个字母创建一个按钮：

var keyList = "QWERTYUIOPASDFGHJKLZXCVBNM";
for (i in keyList) //loops through qwerty keyboard and uses keyButton
{
  var button = keyButton(keyList[i]);
  if (i < 11)
    //give that an element which identifies it as first row
   //document.body.appendChild(button) 
  else if (i < 20)
    //give that an element which identifies it as second row
  else {
    //give that an element which identifies it as third row

  }

我试图做到这一点，以使按钮不是一个接一个，而是分成10个键，然后是9个键，然后是7个键的列。 我不知道从哪里开始实现这一目标。 谢谢您的帮助！

Answer 1

 function keyButton(char, num) { var btn = document.createElement("button"); btn.innerText = char; btn.onclick = function () { keyStroke(this); }; btn.dataset.num = num; if(num == 10 || num == 19) { btn.className = 'break'; } keyboard.appendChild(btn); return btn; } var keyList = "QWERTYUIOPASDFGHJKLZXCVBNM"; var keyboard = document.getElementById('keyboard'); for (i in keyList) //loops through qwerty keyboard and usesn { keyButton(keyList[i], i); } 

 button { float: left; display: block; } button.break { clear: left; } 

 <div id="keyboard"></div>