用 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 和 name，但不幸的是，它们不会保持相同的数字，实际上标记将变为：

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

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

1. 克隆的输入然后附加到原始输入的顺序错误，因为它被添加到第一个元素 (0)，所以最后一个附加的元素不会是上升的，但在这种情况下，它将具有更高的数字.

2. id 和 name 都会递增，所以我会有相同的输入，id=1 和 name=2，这并不理想。

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

Answer 1

只增加i一次，然后再分配新的id 和name。另外，使用按钮上的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>