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

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

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

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

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

Answer 1

i仅递增一次，在您分配新的id和之前name。此外，使用insertAdjacentElement按钮在它之前插入每个新输入，而不是after, 来插入新输入：&nbsp; function duplicate() {&nbsp; &nbsp; i++;&nbsp; &nbsp; let clone = original[0].cloneNode(true);&nbsp; &nbsp; clone.id = "input" + i;&nbsp; &nbsp; clone.name = "input" + i;&nbsp; &nbsp; document.querySelector('button').insertAdjacentElement('beforebegin', clone);&nbsp; }document.addEventListener("DOMContentLoaded", function() {&nbsp; const adduser = document.querySelector("#add-user");&nbsp; const original = document.querySelectorAll('#input');&nbsp; let i = 0;&nbsp; function duplicate() {&nbsp; &nbsp; i++;&nbsp; &nbsp; let clone = original[0].cloneNode(true);&nbsp; &nbsp; clone.id = "input" + i;&nbsp; &nbsp; clone.name = "input" + i;&nbsp; &nbsp; document.querySelector('button').insertAdjacentElement('beforebegin', clone);&nbsp; }&nbsp; adduser.onclick = duplicate});<form action="second.php" method="post">&nbsp; <div class="form-group">&nbsp; &nbsp; <label for="username">Name of the user:</label>&nbsp; &nbsp; <input type="text" class="form-control multinput" class="username" id="input" placeholder="Enter the user's name" name="fullName">&nbsp; &nbsp; <button type="button" class="btn btn-default" id="add-user">+ Add a user</button>&nbsp; </div>&nbsp; <div class="buttons">&nbsp; &nbsp; <!-- <input type="button" name="next" value="submit"> -->&nbsp; &nbsp; <input type="submit" name="submit" id="submit" class="button" value="Submit" />&nbsp; </div></form>

Answer 2

三件事：在使用它之后增加 i，而不是每次你需要它时它都会增加多次而不是每次重复增加 1使用 setAttribute追加到父元素，而不是在原始输入之后实现降序document.addEventListener("DOMContentLoaded",function() {&nbsp; &nbsp; const adduser = document.querySelector("#add-user");&nbsp; &nbsp; const original = document.getElementById('input');&nbsp; &nbsp; let i = 1;&nbsp; &nbsp; function duplicate() {&nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; let clone = original.cloneNode(true);&nbsp; &nbsp; &nbsp; &nbsp; clone.setAttribute("id", "input"+i);&nbsp; &nbsp; &nbsp; &nbsp; clone.setAttribute("name", "input"+i);&nbsp; &nbsp; &nbsp; &nbsp; i++&nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; original.parentNode.appendChild(clone);&nbsp; &nbsp; }&nbsp; &nbsp; adduser.onclick = function() {&nbsp; &nbsp; &nbsp; &nbsp; duplicate();&nbsp; &nbsp; };});<form action="second.php" method="post">&nbsp; &nbsp; <div class="form-group">&nbsp; &nbsp; &nbsp; &nbsp; <label for="username">Name of the user:</label>&nbsp; &nbsp; &nbsp; &nbsp; <input type="text" class="form-control multinput" class="username" id="input" placeholder="Enter the user's name" name="fullName">&nbsp; &nbsp; &nbsp; &nbsp; <button type="button" class="btn btn-default" id="add-user">+ Add a user</button>&nbsp; &nbsp; </div>&nbsp; &nbsp; <div class="buttons">&nbsp; &nbsp; &nbsp; &nbsp; <input type="submit" name="submit" id="submit" class="button" value="Submit"/>&nbsp; &nbsp; </div></form>