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

Question

我目前卡住了，我需要帮助使用 javascript 在 html 页面中添加额外的表单输入和标签。我正在尝试从用户那里获取一些细分，然后单击它会创建所需的其他表单字段。如果他们提供 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 元素并将它们附加到表单中。您可以将它们附加在表单中某些子元素之前/之后的表单末尾

这就是如何将它们附加到表单的末尾

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)

        }
}