使用 js 和增量符号 (++) 克隆一个项目，我的错误是双增量 i

Question

这是我的问题：

document.addEventListener("DOMContentLoaded",function() {
    const adduser = document.querySelector("#add-user");
    const original = document.querySelectorAll('#input');
    let i = 0;

    function duplicate() {
        
        let clone = original[0].cloneNode(true);
        clone.id = "input" + ++i;
        clone.name = "input" + ++i;
        
        original[0].after(clone);
    }

    adduser.onclick = function() {

        duplicate();

    };
});

<form action="second.php" method="post">
    <div class="form-group">
        <label for="username">Name of the user:</label>
        <input type="text" class="form-control multinput" class="username" id="input" placeholder="Enter the user's name" name="fullName">
        <button type="button" class="btn btn-default" id="add-user">+ Add a user</button>
    </div>
    <div class="buttons">
        <input type="submit" name="submit" id="submit" class="button" value="Submit"/>
    </div>
</form>

正如您已经猜到的那样，我正在尝试克隆一个字段，但我想增加这个字段的两个属性（在本例中，这是一个输入字段）。

现在我的问题是，一旦我按下按钮克隆 INPUT，在这种情况下，我将增加 id 和名称，但不幸的是，它们不会保持相同的数字，在事实上，标记将变为：

<form action="second.php" method="post">
    <div class="form-group">
        <label for="username">Name of the user:</label>
        <input type="text" class="form-control multinput" id="input" placeholder="Enter the user's name" name="fullName">
        <input type="text" class="form-control multinput" id="input" placeholder="Enter the user's name" name="input3">
        <input type="text" class="form-control multinput" id="input" placeholder="Enter the user's name" name="input1">
        <button type="button" class="btn btn-default" id="add-user">+ Add a user</button>
    </div>
    <div class="buttons">
        <input type="submit" name="submit" id="submit" class="button" value="Submit">
    </div>
</form>

这个。正如您所注意到的，在我的选择中，我们有两个错误的操作，它们是：

克隆然后附加到原始输入的输入顺序错误，因为它被添加到第一个元素 (0) 所以附加的最后一个元素不会上升，但在这种情况下, 它将具有更高的数字。
id和name都会递增，所以id=1和name=2的输入是一样的，不太理想

关于如何解决问题的任何提示？

Answer 1

在分配新的 id 和 name 之前，

仅增加 i 一次。此外，使用按钮上的 insertAdjacentElement 在它之前插入每个新输入，而不是 after，以插入新输入：

  function duplicate() {
    i++;
    let clone = original[0].cloneNode(true);
    clone.id = "input" + i;
    clone.name = "input" + i;
    document.querySelector('button').insertAdjacentElement('beforebegin', clone);
  }

document.addEventListener("DOMContentLoaded", function() {
  const adduser = document.querySelector("#add-user");
  const original = document.querySelectorAll('#input');
  let i = 0;

  function duplicate() {
    i++;
    let clone = original[0].cloneNode(true);
    clone.id = "input" + i;
    clone.name = "input" + i;
    document.querySelector('button').insertAdjacentElement('beforebegin', clone);
  }

  adduser.onclick = duplicate
});

<form action="second.php" method="post">
  <div class="form-group">
    <label for="username">Name of the user:</label>
    <input type="text" class="form-control multinput" class="username" id="input" placeholder="Enter the user's name" name="fullName">
    <button type="button" class="btn btn-default" id="add-user">+ Add a user</button>
  </div>
  <div class="buttons">
    <!-- <input type="button" name="next" value="submit"> -->
    <input type="submit" name="submit" id="submit" class="button" value="Submit" />
  </div>
</form>

Answer 2

三件事：

使用后递增 i，不是每次需要它时递增，否则它会递增多次而不是每次重复递增 1
使用 setAttribute
附加到父元素，而不是在原始输入之后实现降序

document.addEventListener("DOMContentLoaded",function() {
    const adduser = document.querySelector("#add-user");
    const original = document.getElementById('input');
    let i = 1;

    function duplicate() {
        
        let clone = original.cloneNode(true);
        clone.setAttribute("id", "input"+i);
        clone.setAttribute("name", "input"+i);
        i++
        
        original.parentNode.appendChild(clone);
    }

    adduser.onclick = function() {

        duplicate();

    };
});

<form action="second.php" method="post">
    <div class="form-group">
        <label for="username">Name of the user:</label>
        <input type="text" class="form-control multinput" class="username" id="input" placeholder="Enter the user's name" name="fullName">
        <button type="button" class="btn btn-default" id="add-user">+ Add a user</button>
    </div>
    <div class="buttons">
        <input type="submit" name="submit" id="submit" class="button" value="Submit"/>
    </div>
</form>

使用 js 和增量符号 (++) 克隆一个项目，我的错误是双增量 i

Cloning an item with js and the increment sign (++), my error with double increment i

html

javascript

clone

increment