javascript - 动态 JavaScript 表单

Question

我有一个简单的表单，如下所示，以便用户可以输入问题的名称:

<input type="text" id="question_name" name="question_name" value="">Question Name: <br />
<a href="#" id="addanother" onclick="addNewQuestion()">Add Another</a>
<div id="container"/>

<input id="go" name="btnSubmit" type="submit" value="Submit" class="btn" />

我想创建一个 Javascript 函数 (addNewQuestion())，它允许用户通过单击“添加另一个”链接动态添加另一个问题。所有带有问题的文本框都应显示在屏幕上。

我知道它正在使用 getElementById 并且很可能使用 for 循环，但我一直碰壁。谁能给我一个简单的解决方案吗？

Answer 1

有很多方法可以做到这一点。这是一个简单的 JavaScript 示例。请注意，您要么希望避免使用 id，以便它们不会在 DOM 中重复，要么您希望动态命名它们。

function addNewQuestion() {
  var container = document.getElementById("questions");
  var question = document.querySelector(".question"); 
  container.appendChild(question.cloneNode(true));
  return false;
}

.question { display: block }

<div id="questions">
  <label class="question">
    Question Name:
    <input type="text" value="" />
  </label>
</div>
<a href="#" id="addanother" onclick="return addNewQuestion()">Add Another</a>