如何动态创建<input type ="text"/>

Question

我想动态地在我的Web表单中创建一个输入类型的文本.更具体地说,我有一个文本字段,用户输入所需文本字段的数量; 我希望以相同的形式动态生成文本字段.

我怎么做？

Answer 1

使用JavaScript:

var input = document.createElement("input");
input.type = "text";
input.className = "css-class-name"; // set the CSS class
container.appendChild(input); // put it into the DOM

Answer 2

使用Javascript,您只需要document.createElement和setAttribute.

var input = document.createElement("input");
input.setAttribute('type', 'text');

然后,您可以使用appendChild将创建的元素附加到所需的父元素.

var parent = document.getElementById("parentDiv");
parent.appendChild(input);

Answer 3

创建用户提供的输入字段数量

1. 从用户那里获取文本字段的数量并将其分配给一个变量。

   var no = document.getElementById("idname").value

2. 要创建输入字段，请使用createElement方法并指定元素名称，即“输入”作为参数，如下所示并将其分配给变量。

   var textfield = document.createElement("input");

3. 然后为变量分配必要的属性。

   textfield.type = "text";

   textfield.value = "";

4. 最后使用appendChild方法将变量附加到表单元素。这样输入元素将在表单元素本身中创建。

   document.getElementById('form').appendChild(textfield);

5. 循环 2,3 和 4 步骤以创建用户在表单元素内指定的所需数量的输入元素。

   for(var i=0;i<no;i++) {           
       var textfield = document.createElement("input");
       textfield.type = "text"; textfield.value = "";
       document.getElementById('form').appendChild(textfield);
   }
   

这是完整的代码

for(var i=0;i<no;i++) {           
    var textfield = document.createElement("input");
    textfield.type = "text"; textfield.value = "";
    document.getElementById('form').appendChild(textfield);
}

function fun() {
    /*Getting the number of text fields*/
    var no = document.getElementById("idname").value;
    /*Generating text fields dynamically in the same form itself*/
    for(var i=0;i<no;i++) {
        var textfield = document.createElement("input");
        textfield.type = "text";
        textfield.value = "";
        document.getElementById('form').appendChild(textfield);
    }
}