将新的 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 有。

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

Appending new DOM elements to existing elements

html

javascript

dom

appendchild