Question

当用户点击按钮时，我正在尝试动态地向页面添加输入字段。

我有以下代码，正在调用，但无法按预期工作

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)"

导致此问题的原因是什么？

Answer 1

你想使用jQuery吗？如果你正在使用jQuery，你可以按照我的简单解决方案，其他明智的@ kira-sen提供了很好的解决方案。

这是fiddle you may look at。

<强> 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)+"'>");
  }

});

希望这有帮助。

Answer 2

您可以将此作为示例来执行您想要的操作。

＆＃13;

var container = document.querySelector('#container')

for (var i = 0; i < 10; i++) {
  var input = document.createElement('input') // create a new element
  input.classList.add('input') // Add .input class to the created element
  input.placeholder = 'Input ' + i // set an attribute
  input.id = 'input' + i // set the ID
  container.append(input) // Append the element to a parent element (container in this case)
}

＆＃13;

.input {
  width: 100%;
}

＆＃13;

<div id="container"></div>

＆＃13;

Answer 3

试试这个

Jul-23-2017

// Creating 10 Input textboxes
var div = document.createElement('div');

for(var i = 0; i < 10; i++) {
  var inputElement=document.createElement('input');
  inputElement.setAttribute('type','text');
  inputElement.setAttribute('id','id' + i);
  inputElement.value='My Value ' + (i+1);
  div.appendChild(inputElement);
}

document.getElementById("container").appendChild(div);

// Adding class
var inputElements = document.querySelectorAll('input');

for(var i=0; i < inputElements.length; i++) {
  inputElements[i].className='MyClass' + i;
  // Getting value
  console.log(inputElements[i].value);
}

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

3 个答案: