javascript - 将按钮添加到特定的 div

Question

我想在一个循环中创建按钮，这取决于它必须创建 x 个按钮的值，一开始我试图通过 Javascript 创建一个按钮。具有该功能的按钮必须在一个中，但它创建的按钮必须在另一个中创建。

我如何完成这项工作？

我的想法(如下所示)行不通。

function createButton(context, func){
    var button = document.createElement("input");
    button.type = "button";
    button.value = "im a button";
    button.onclick = func;
    context.appendChild(button);
}

html,body { margin:0; padding: 0; }
#inputpanel {
  width: calc(40vw - 10px);
}
#selectpanel {
  width: calc(20vw - 10px);
}

#inputpanel,#selectpanel {
  display: inline-block;
  box-sizing: border-box;
  height: calc(100vh - 200px);
  margin: 0;
  padding: 0;
}

<div id="inputpanel">
  
 <button type="button" id="createBut" onclick="createButton(document.selectpanel, function(){
    alert('it works');})">create Button</button>
</div>

<div id="selectpanel">
adsadasdasd<br />
asfdsdfsdfgdf

</div>

谢谢阿德里安

Answer 1

下面是创建按钮的代码:

function createButton(context, func) {
  var button = document.createElement("input");
  button.type = "button";
  button.value = "im a button";
  button.onclick = func;

  var selectPanel = document.getElementById('selectpanel');
  selectPanel.appendChild(button);
}

html,
body {
  margin: 0;
  padding: 0;
}

#inputpanel {
  width: calc(40vw - 10px);
}

#selectpanel {
  width: calc(20vw - 10px);
}

#inputpanel,
#selectpanel {
  display: inline-block;
  box-sizing: border-box;
  height: calc(100vh - 200px);
  margin: 0;
  padding: 0;
}

<div id="inputpanel">

  <button type="button" id="createBut" onclick="createButton(document.selectpanel, function(){
    alert('it works');})">create Button</button>
</div>

<div id="selectpanel">
</div>