Question

正在处理一行上有一些输入字段的应用程序，在侧面上有一个附加图标，当用户单击时，会动态添加一个包含输入字段的附加行。我想在用户单击“添加”按钮图标时动态生成过程输入字段的ID。

请协助？

标记代码

    <div>
        <input type="text" name="1" size="4" id="inp1" value="">
        <input type="text" name="2" size="4" id="inp2"  value="">
        <input type="text" name="3" size="4" id="inp3"  value="">
        <input type="text" name="4" size="4" id="inp4"  value="">
        <input type="text" name="5" size="4" id="inp5"  value="">  +   
    </div>
//Icon to add another row of input fields dynamically
<i class="fas fa-plus"></i>

Answer 1

简单完成：

var inputContainer = document.getElementById("inputContainer"),
  cnt = 1;

function generateInput() {
  cnt++;
  inputContainer.innerHTML += '<input type="text" name="' + cnt + '" size="4" id="inp' + cnt + '" value="">';
}

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css" integrity="sha384-oS3vJWv+0UjzBfQzYUhtDYW+Pj2yciDJxpsK1OYPAYjqT085Qq/1cq5FLXAZQ7Ay" crossorigin="anonymous">


<div id="inputContainer">
  <input type="text" name="1" size="4" id="inp1" value="">
</div>

<i class="fas fa-plus" onclick="generateInput()"></i>

在我的示例中，我只是在每次调用cnt函数时增加generateInput()变量-然后将输入及其新的唯一inputContainer附加到name和id

希望这会有所帮助！

Answer 2

for (let i = 0; i < 10; i++) {
 	let input = document.createElement('input');
	input.id = 'input' + i;
  document.querySelector('div').appendChild(input);
}

<div></div>

Answer 3

您需要做的就是知道要添加的元素的下一个索引/编号，以确保它是唯一的，并遵循您已经为现有的元素编号。

当您要以5组为一组添加输入（并以新的<div>分组）时，建议您添加一个外部包装元素，以便我们可以注入新的<div>（内部5个新的<input>元素）。

每次单击按钮时，您将要创建一个新的容器<div>，然后使用一个简单的for循环来迭代添加5个新的<input>元素。在每次迭代中，您都增加唯一ID：

// Starting number of inputs
let count = 5;

// Wrapper
const wrapper = document.querySelector('#wrapper');

document.querySelector('#btn').addEventListener('click', () => {

  const container = document.createElement('div');
  
  for (let i = 0; i < 5; i++) {
    // Increment the count to ensure that it is unique
    count++;

    // Create your new `<input>` element
    const input = document.createElement('input');
    input.type = 'text';
    input.name = count;
    input.size = '4';
    input.id = `inp${count}`;

    container.appendChild(input);
    
    // Optional: add empty whitespace after each child
    container.append(document.createTextNode(' '));
  }
  
  wrapper.appendChild(container);
});

<div id="wrapper">
<div>
  <input type="text" name="1" size="4" id="inp1" value="">
  <input type="text" name="2" size="4" id="inp2" value="">
  <input type="text" name="3" size="4" id="inp3" value="">
  <input type="text" name="4" size="4" id="inp4" value="">
  <input type="text" name="5" size="4" id="inp5" value="">
</div>
</div>
<button type="button" id="btn">Add new input group</button>

Answer 4

这个怎么样？（我将“添加”按钮放在了包含输入的DIV之外，但是如果您愿意，也可以将其放入其中。）

<div class="inputSet">
    <input type="text" name="1" size="4" id="inp1" value="">
    <input type="text" name="2" size="4" id="inp2"  value="">
    <input type="text" name="3" size="4" id="inp3"  value="">
    <input type="text" name="4" size="4" id="inp4"  value="">
    <input type="text" name="5" size="4" id="inp5"  value="">
</div>
<button onclick="addInputSet(this);">ADD</button>
<i class="fas fa-plus"></i>

Javascript：

var rowCount = 5;
function addInputSet(btn) {
    var row = document.querySelector('div.inputSet').cloneNode(true);
    var inputs = row.getElementsByTagName('input');
    for(var i of inputs) {
        i.name = (++rowCount).toString();
        i.id = 'inp' + rowCount;
    }
    btn.parentNode.insertBefore(row,btn);
}

使用Javascript动态生成输入ID

4 个答案: