Html 如何通过复选框复制div？

我希望用户能够创建数量不确定的问题。一旦用户创建了一个问题，我希望另一个问题2出现，依此类推

我该怎么办

---

谢谢

我会这样做：

函数addClone{ var cloned=document.getElementById'test'.cloneNodetrue；//克隆元素 document.body.appendChildcloned；//将克隆的元素添加到页面 } 亚德沃乔姆

---

你可以试试这样的

HTML

更新

我遗漏了关于复选框的部分，从UI的角度来看，我认为您不需要复选框来完成这项工作，不确定它是否表明这项工作已经完成，我想继续，但这取决于您的决定。这是一把新小提琴

HTML

---

在javascript中，您可以这样做

var i=0； 函数addMore{ i++； var parentDiv=document.createElementdiv； var childLabel=document.createElementlabel； childLabel.appendChilddocument.createTextNodeEnter值+i； var childTextBox=document.createElementinput； childTextBox.type=文本； childTextBox.id=txtInput+i； var childCheckBox=document.createElementinput； childCheckBox.type=checkbox； childCheckBox.onchange=addMore； parentDiv.appendChildLabel； parentDiv.appendChildTextBox； parentDiv.appendChildCheckBox； document.body.appendChildparentDiv； } 添加项目

---

下面是我使用纯JavaScript的大致操作，请参见注释进行解释

//创建空白问题节点的副本 问题\模板=document.getElementByIdquestions.firstElementChild.cloneNodetrue； //一个很好的克隆包装 new_question=函数{return question_template.cloneNodetrue；}； //当用户完成提问时要做的事情 alrt=函数{ alertArray.prototype.map.calldocument.getElementById questions.getElementsByTagNameinput， functionelt{return elt.value；}； }; //文本放置在文本框中时的挂钩 addnew=函数{ //如果不这样做，请删除事件侦听器，然后在每个 //击键将创建一个新框 document.getElementByIdquestions.lastElementChild.oninput=functionevent{}； //添加新行 document.getElementByIdquestions.appendChilddocument.createElementbr； //添加一个新的问题框 document.getElementByIdquestions.appendChildnew_问题； };

---

你真的需要详细说明一下！因此，一旦用户在文本框中输入标题和描述，他们就会单击一个文本框，表示其已完成，下面会出现另一组文本框，以便输入第二个问题。一旦他们输入了所有问题，他们可以单击按钮提交数据。请显示您迄今为止尝试的代码以及其中的哪些部分无效。非常感谢，重复的文本框的名称是什么？@JoeTindall抱歉，键入太快：您可以为他们命名任何您想要的名称。你可以在克隆它们时为它们添加一个唯一的名称或编号，我忽略了复选框的部分，我用一个新的提琴更新了我的答案谢谢，真的很有帮助@乔丹，你明白了。很高兴为您提供帮助，您能在可能的情况下将此标记为已解决吗？

<div class="input-container">
  <input class="question" placeholder="Question" type="text"/>
</div>

<div class="add-option">+</div>

//click the '+' sign
$(".add-option").click(function(){

   //find the first input and clone it then append it to the container
   $(".input-container input:first").clone().appendTo(".input-container");

   //clear any value from the next input had there been any added
   $(".input-container input:last").val("");
});

<div class="input-container">
  <input class="question" placeholder="Question" type="text"/>
</div>

<div class="add-option"><input type="checkbox"/></div>

//click the checkbox
$(".add-option input[type=checkbox]").click(function(){

 //find the first input and clone it then append it to the container
 $(".input-container input:first").clone().appendTo(".input-container");

 //clear any value from the next input had there been any added
 $(".input-container input:last").val("");

 //reset the checkbox
 $(this).prop("checked", false);
});