javascriptのループ処理でフォーム作成

inputに値を入力した後、JSでforループを回してinputを指定個数生成したいです。
JSのforループ内にhtml要素のinputがあるのがまずいのか、エラーが出て期待する動作をしてくれません。
※idのinputに3を入力してbuttonを押したらaa=3となり、6つフォームを生成して欲しい

ご助言頂けませんでしょうか。

html
1<input type="number" id="id">
2                <input type="button" onclick="test()">
3                <script>
4                    function test() {                                              
5                        var aa = document.getElementById("id").value;
6                        for ( i = 1; i <= aa; i++ ){                    
7                            <div>
8                            <form>
9                                <input type="text" class="data" id= 1.i>
10                                <input type="text" class="data" id= 2.i>
11                            </form>
12                            </div>
13                      };
14                    };
15                </script>

html
1<input type="number" id="id">
2                <input type="button" onclick="test()">
3                <script>
4                    function test() {                                              
5                        var aa = document.getElementById("id").value;
6                        for ( i = 1; i <= aa; i++ ){  </script>                  
7                            <form>
8                                <input type="text" class="data" id= i>
9                            </form>
10<script>
11                      };
12                    };
13                </script>

行動規範の内容に同意します

回答1件

ベストアンサー

javascript
1<script>
2function test(obj){
3  var aa = parseInt(document.getElementById("hoge").value);
4  for(var i=1;i<= aa;i++){
5    var f=document.createElement('form');
6    f.appendChild(Object.assign(document.createElement('input'),{
7    type:"text",
8    className:"data",
9    id:i,
10    }));
11    obj.parentNode.appendChild(f);
12  };
13};
14</script>
15<input type="number" id="hoge" min="0" max="10">
16<input type="button" onclick="test(this)" value="test">