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

How to create <input type=“text”/> dynamically

提问by Mohammad Usman

I want to create an input type text in my web form dynamically. More specifically, I have a textfield where the user enters the number of desired text fields; I want the text fields to be generated dynamically in the same form.

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

How do I do that?

我怎么做？

回答by Zach

With JavaScript:

使用 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

回答by Alex Jolig

Using Javascript, all you need is document.createElementand setAttribute.

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

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

Then you can use appendChildto append the created element to the desired parent element.

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

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

回答by Eliasdx

Maybe the method document.createElement();is what you're looking for.

也许方法document.createElement();就是你正在寻找的。

回答by daniellmb

You could do something like this in a loop based on the number of text fields they enter.

您可以根据他们输入的文本字段的数量在循环中执行类似的操作。

$('<input/>').attr({type:'text',name:'text'+i}).appendTo('#myform');

But for better performance I'd create all the html first and inject it into the DOM only once.

但是为了获得更好的性能，我会先创建所有的 html 并将其注入 DOM 一次。

var count = 20;
var html = [];
while(count--) {
  html.push("<input type='text' name='name", count, "'>");
}
$('#myform').append(html.join(''));

Editthis example uses jQuery to append the html, but you could easily modify it to use innerHTML as well.

编辑此示例使用 jQuery 附加 html，但您也可以轻松修改它以使用 innerHTML。

回答by Sean

You could use createElement()method for creating that textbox

您可以使用createElement()创建该文本框的方法

回答by user1477132

I think the following link will help you. If you want to generate fields dynamically and also want to remove them on the same time you can get the help from here. I had the same question, So i got the answer

我认为以下链接会对您有所帮助。如果您想动态生成字段并同时删除它们，您可以从这里获得帮助。我有同样的问题，所以我得到了答案

$(function() {
        var scntDiv = $('#p_scents');
        var i = $('#p_scents p').size() + 1;

        $('#addScnt').live('click', function() {
                $('<p><label for="p_scnts"><input type="text" id="p_scnt" size="20" name="p_scnt_' + i +'" value="" placeholder="Input Value" /></label> <a href="#" id="remScnt">Remove</a></p>').appendTo(scntDiv);
                i++;
                return false;
        });

        $('#remScnt').live('click', function() { 
                if( i > 2  ) {
                        $(this).parents('p').remove();
                        i--;
                }
                return false;
        });
});

http://jsfiddle.net/jaredwilli/tZPg4/4/

http://jsfiddle.net/jaredwilli/tZPg4/4/

回答by jaaq

See this answer for a non JQuery solution. Just helped me out!

有关非 JQuery 解决方案，请参阅此答案。刚刚帮我解决了！

Adding input elements dynamically to form

动态添加输入元素到表单

回答by Mass

Here's my solution

这是我的解决方案

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.id = "idname4textfeild"; 
    textfield.setAttribute("value","");
    document.getElementById('form').appendChild(textfield);
  }
}

<form id="form">
    <input type="type" id="idname" oninput="fun()" value="">
</form>

回答by Omar bakhsh

you can use ES6 back quits

你可以使用 ES6 退出

  var inputs = [
        `<input type='checkbox' id='chbox0' onclick='checkboxChecked(this);'> <input  type='text' class='noteinputs0'id='note` + 0 + `' placeholder='task0'><button  id='notebtn0'                     >creat</button>`, `<input type='text' class='noteinputs' id='note` + 1 + `' placeholder='task1'><button  class='notebuttons' id='notebtn1' >creat</button>`, `<input type='text' class='noteinputs' id='note` + 2 + `' placeholder='task2'><button  class='notebuttons' id='notebtn2' >creat</button>`, `<input type='text' class='noteinputs' id='note` + 3 + `' placeholder='task3'><button  class='notebuttons' id='notebtn3' >creat</button>`, `<input type='text' class='noteinputs' id='note` + 4 + `' placeholder='task4'><button  class='notebuttons' id='notebtn4' >creat</button>`, `<input type='text' class='noteinputs' id='note` + 5 + `' placeholder='task5'><button  class='notebuttons' id='notebtn5' >creat</button>`, `<input type='text' class='noteinputs' id='note` + 6 + `' placeholder='task6'><button  class='notebuttons' id='notebtn6' >creat</button>`, `<input type='text' class='noteinputs' id='note` + 7 + `' placeholder='task7'><button  class='notebuttons' id='notebtn7' >creat</button>`, `<input type='text' class='noteinputs' id='note` + 8 + `' placeholder='task8'><button  class='notebuttons' id='notebtn8' >creat</button>`, `<input type='text' class='noteinputs' id='note` + 9 + `' placeholder='task9'><button  class='notebuttons' id='notebtn9' >creat</button>`
    ].sort().join(" ");
   document.querySelector('#hi').innerHTML += `<br>` +inputs;

<div id="hi"></div>