如何使用Javascript创建输入字段？

我试图在用户单击按钮时，向页面动态添加输入字段

我有下面的代码，正在调用它，但没有按预期工作

var a= document.getElementsByTagName("button");
a[0].addEventListener("click", clicked);
function clicked(){
  var input = document.createElement("input");
  document.appendChild("input");
}

我面临的错误是：

"error"
"TypeError: Failed to execute 'appendChild' on 'Node': parameter 1 is not of type 'Node'.
    at HTMLButtonElement.clicked (sofodipabe.js:5:12)"

---

是什么导致了这个问题？

您可以将此作为一个示例来做您想做的事情

var container=document.querySelector（“#container”）
对于（变量i=0；i<10；i++）{
var input=document.createElement（'input'）//创建一个新元素
input.classList.add（'input'）//将.input类添加到创建的元素中
input.placeholder='input'+i//设置属性
input.id='input'+i//设置id
container.append（input）//将元素附加到父元素（本例中为容器）
}

.input{
宽度：100%；
}

试试这个

//创建10个输入文本框
var div=document.createElement（'div'）；
对于（变量i=0；i<10；i++）{
var inputElement=document.createElement（'input'）；
setAttribute（'type'，'text'）；
setAttribute（'id'，'id'+i）；
value='My value'+（i+1）；
div.appendChild（inputElement）；
}
document.getElementById（“容器”）.appendChild（div）；
//添加类
var inputElements=document.querySelectorAll（'input'）；
对于（var i=0；i

---

是否要使用jQuery？如果您正在使用jQuery，您可以按照下面我的简单解决方案来操作@kira sen提供的好解决方案

这是你的电话号码

HTML

<input type="text" id="n" placeholder="How may elements to add">
<button id="addElements">Add elements</button> <br>
<div id="addElementsHere">

</div>

添加元素

JS

$("#addElements").click(function(e){
    var n = parseInt($(this).siblings("#n").val());

  for(var i = 0; i<n; i++){
        $("#addElementsHere").append("<input class='xyz' type='text' placeholder=' Enter value for input number " + (i + 1) + "' id='inp-"+(i+1)+"'>");
  }

});

$（“#加法器”）。单击（函数（e）{
var n=parseInt（$（this.this）（#n”）.val（）；
对于（var i=0；i）您尝试过什么吗？与您使用javascript创建任何其他元素的方式相同。在这里询问之前，似乎没有做过任何研究工作。请花一些时间阅读并确认