如何复制 HTML 中某个部分的 innerHTML 并创建它的精确副本作为其子项？

Question

我目前正在尝试弄乱 JS，我希望能够添加一个新的部分 onclick for (Set: , Rep: , Weight: ) 但我一直遇到新创建的元素乘以每次单击时，父级都会变大。 有没有办法解决这个问题？ 密码笔

<h1 class="h1 text-center">Log a Workout</h1>
<section class="workoutForm">
    <form action="">
        <ul>
            <li>
                <label for="name">Name of Workout:</label>
                <input type="text" id="workoutName">
            </li>
            <li>
                <label for="date">Date of Workout</label>
                <input type="date" name="date" id="date">
            </li>
            <li>
                <label for="date">Name of Exercise</label>
                <input type="text" id="exerciseName" placeholder="Ex: Barbell Bench Press">
                <ul>
                    <li id="entireSet">
                        <label for="exerciseName"> Set:</label>
                        <input type="number" name="set" id="set" required minlength="1">
                        <label for="exerciseName"> Reps:</label>
                        <input type="number" name="rep" id="rep" required minlength="1">
                        <label for="exerciseName"> Weight (lbs):</label>
                        <input type="number" name="weight" id="weight" required minlength="1">
                        <input type="button" value="Add Set" onclick="addNewSet()">
                    </li>
                </ul>
                <input type="button" value="Add Exercise">
            </li>
            <li class="button">
                <button type="submit">Save Workout</button>
            </li>
        </ul>
    </form>
</section>

<script>
    function addNewSet() {
        const parent = document.getElementById("entireSet");
        const newSection = document.createElement("li");
        newSection.id = "newSet";
        newSection.innerHTML = parent.innerHTML;
        const deleteBtn = document.createElement("input");
        deleteBtn.type = "button";
        deleteBtn.value = "Delete";
        deleteBtn.id = "remove";
        newSection.appendChild(deleteBtn);
        parent.appendChild(newSection);
        deleteBtn.addEventListener("click", function() { //used to delete sets that were added
            newSection.remove();
        });
    }
</script>

Answer 1

欢迎来到 Stackoverflow，您正在将 li 元素附加到 li 中，因此当您使用“entireSet”部分添加新集合时，会再次添加旧的 2 个元素。

通过使用insertAfter function 新元素将作为兄弟元素添加到“entireSet”

 function addNewSet() { const parent = document.getElementById("entireSet"); const newSection = document.createElement("li"); newSection.id = "newSet"; newSection.innerHTML = parent.innerHTML; const deleteBtn = document.createElement("input"); deleteBtn.type = "button"; deleteBtn.value = "Delete"; deleteBtn.id = "remove"; newSection.appendChild(deleteBtn); insertAfter(newSection, parent); deleteBtn.addEventListener("click", function() { //used to delete sets that were added newSection.remove(); }); } function insertAfter(newNode, existingNode) { existingNode.parentNode.insertBefore(newNode, existingNode.nextSibling); }

 <,DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width. initial-scale=1:0"> <title>Document</title> </head> <body> <h1 class="h1 text-center">Log a Workout</h1> <section class="workoutForm"> <form action=""> <ul> <li> <label for="name">Name of Workout:</label> <input type="text" id="workoutName"> </li> <li> <label for="date">Date of Workout</label> <input type="date" name="date" id="date"> </li> <li> <label for="date">Name of Exercise</label> <input type="text" id="exerciseName" placeholder="Ex: Barbell Bench Press"> <ul> <li id="entireSet"> <label for="exerciseName"> Set:</label> <input type="number" name="set" id="set" required minlength="1"> <label for="exerciseName"> Reps:</label> <input type="number" name="rep" id="rep" required minlength="1"> <label for="exerciseName"> Weight (lbs):</label> <input type="number" name="weight" id="weight" required minlength="1"> <input type="button" value="Add Set" onclick="addNewSet()"> </li> </ul> <input type="button" value="Add Exercise"> </li> <li class="button"> <button type="submit">Save Workout</button> </li> </ul> </form> </section> </body> </html>

如何复制 HTML 中某个部分的 innerHTML 并创建它的精确副本作为其子项？

问题描述

1 个解决方案

解决方案1
0 2022-01-27 05:00:12

如何复制 HTML 中某个部分的 innerHTML 并创建它的精确副本作为其子项？

问题描述

1 个解决方案

解决方案1 0 2022-01-27 05:00:12

解决方案1
0 2022-01-27 05:00:12