Question

我想创建一个表单，该表单从用户获取一个数字，并根据该数字动态创建input个元素。我尝试了以下代码，但没有任何结果：

HTML：

<input type="number" id="row"/>
<button type="submit" onclick="matrix(document.getElementById('row').value)">
 OK</button>

JavaScript的：

function matrix(row){
  for(var i=0; i<=row;i++){
  var s = "<input type='number' id='row'+i />";
  var div = document.createElement('div');
  div.innerHTML = s;
  var elements = div.childNodes;
  }
}

Answer 1

您永远不会将您创建的输入添加到DOM。此外，您不断覆盖elements变量的值。

此外，更好的解决方案可能是使用DOM API而不是设置innerHTML：

function matrix(row) {
   var count = parseInt(row, 10);
   var inputs = [], input;

   for(var i = 0; i < count; i++) {
     input = document.createElement("input");
     input.id   = "row" + i;
     input.type = "number";
     inputs.push(input);
   }

   // Add the proper selector here
   var target = document.querySelector("form");
   inputs.forEach(function(input) {
      target.appendChild(input);
   });
}

示例：http://jsbin.com/valom/1/edit?html,js,output

Answer 2

尝试类似：

<input type="number" id="row" />
<button type="submit" onclick="matrix(document.getElementById('row').value)">
    OK</button>
<div id="test"></div>

<script>
    function matrix(row) {
        for (var i = 0; i <= row; i++) {
            var s = "<input type='number' id='row" + i + "' />";
            var div = document.getElementById('test');
            div.innerHTML += s;
        }
    }
</script>

在JavaScript中创建特定数量的HTML元素

2 个答案: