动态生成输入 ID

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

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

<div></div>

Answer 2

您只需要知道要添加的元素的下一个 index/number，以确保它是唯一的并且遵循您已经为 pre-existing 元素设置的编号。

因为你想以 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 3

简单完成：

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>

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

希望对您有所帮助！

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);
}

动态生成输入 ID

Generating Ids of inputs dynamically

javascript

uniqueidentifier

dynamically-generated