将新DOM元素附加到现有元素

Question

我正在尝试动态增加我的表单在网站上的选择数量。我用javascript来做到这一点。

JS代码：

  var div = document.getElementById("graph-form");
  var para = document.createElement('span');
  para.innerHTML = "Test Type";
  var form = document.getElementById("form-id");
  var selectList = document.createElement("select");
  selectList.setAttribute("name","Test");
  for(var i = 0; i < test_form_values.length; i++){
    var option = document.createElement("option");
    option.value = test_form_values[i];
    option.text = test_form_text[i];
    selectList.appendChild(option);
  }
  form.appendChild(para);
  form.appendChild(selectList);
  var para = document.createElement('span');
  para.innerHTML = "Parameter";
  var selectList = document.createElement("select");
  selectList.setAttribute("name","Parameter");
  for(var i = 0; i < param_form_values.length; i++){
    var option = document.createElement("option");
    option.value = param_form_values[i];
    option.text = param_form_text[i];
    selectList.appendChild(option);
  }
  form.appendChild(para);
  form.appendChild(selectList);

Html代码：

  <form action="/analytics" method = "post"></form>
  <div id = "form-id">
  <span>Test Type </span>
  <select name="Test">
    <option value="Aop2DContact">AOP 2D Contact</option>
    <option value="Aop2DMag">AOP 2D Magnification</option>
  </select>
  <span>Parameter </span>
  <select name="Parameter">
    <option value="MTF1">MTF at 2 lp/mm parallel</option>
    <option value="MTF2">MTF at 4 lp/mm parallel</option>
  </select>
    </div>
  <div class="buttons">
    <input type="submit">
  </div>
</form>

追加后：

在我追加新创建的元素之后，它不仅不会附加到元素内部，而是将我放在元素中的div移到外面。我觉得可能有一个明显的答案，为什么我的HTML重组，但我不知道那是什么。

Answer 1

与Turnip评论一样，您打开表格后即可结束表单。

此外，您的JS希望附加ID为“form-id”的元素，而form没有该ID，您的内部div会这样做。