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

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>