如何使用 javascript 动态复制或添加更多 html 表单字段？

Question

我目前卡住了，我需要帮助使用 javascript 将额外的表单输入和标签添加到 html 页面中。 我正在尝试从用户那里获取一些段，并且 onclick 它会创建所需的其他表单字段。 如果他们提供 3，那么它会创建另外 2 个具有相同变量/选择的表单字段。 我正在尝试使用 Javascript 中的 for 循环来执行此操作，但没有成功。

我的 Html

 <h2>New Project</h2> <p>Please enter the information below:</p> <label for="project-name">Project Name </label> <input type="text" id = "project-name" class="form-input"> <label for="segments">Number of Segments </label> <input type="number" id = "segments" min="3" class="form-input"> <input type = "button" value = "Add Segments" onclick = "addSegment"><br> <!--Segment Info Start--> <label for="segment">Segment Type</label> <select id="segment" name="segment" class="form-input"> <option value="ramp">Ramp</option> <option value="dwell">Dwell</option> <option value="step">Step</option> </select> <label for="temp">Temperature</label> <input type="number" id = "temp" class="form-input" min="30"> <label for="time">Time</label> <input type="number" id = "time" class="form-input" min="1"> <!--Segment Info End--> <input type="reset" value="Reset"> <input type="submit" value="Start"> </form>

我的 Javascript

function addSegment(){

        var segments = document.getElementById("segments").value;

        var seg = segments-1;

        var i;

        for (i = 0, i<seg, i++){




        }


}

谢谢

Answer 1

您可以动态创建 html 元素和 append 它们来形成。 您可以 append 将它们放在表单中某些子元素之前/之后的表单末尾

这就是你如何可以 append 他们到表格的末尾

function addSegment(){

        var segments = document.getElementById("segments").value;

        var seg = segments-1;

        var i;

        for (i = 0, i<seg, i++){
            const label = document.createElement('label');
            label.for=`someName${i}`;
            const input = document.createElement('input');
            input.type="text" // or any other
            input.name = `someName${i}`;
            // and all other attributtes you need to set
            document.getElementById("myForm").appendChild(label)
            document.getElementById("myForm").appendChild(input)

        }
}