html - チェックボックスでdivを複製する方法は?

Question

ユーザーが無数の質問を作成できるようにしたい。ユーザーが 1 つの質問を作成したら、別の質問 (質問 2) を表示したいとします。

これについてどうすればいいですか？

ありがとう

Answer 1

JavaScriptでは、このようにすることができます

var i = 0;

function addMore() {
  i++;
  var parentDiv = document.createElement("div");

  var childLabel = document.createElement("label");
  childLabel.appendChild(document.createTextNode("Enter Value " + i));

  var childTextBox = document.createElement("input");
  childTextBox.type = "text";
  childTextBox.id = "txtInput" + i;

  var childCheckBox = document.createElement("input");
  childCheckBox.type = "checkbox";
  childCheckBox.onchange = addMore;

  parentDiv.appendChild(childLabel);
  parentDiv.appendChild(childTextBox);
  parentDiv.appendChild(childCheckBox);
  document.body.appendChild(parentDiv);

}

<div>
  Add Items
  <input type="checkbox" onchange="addMore()">
</div>

この助けを願っています

Answer 2

私は次のようなことをします：

function addClone() {
    var cloned = document.getElementById('test').cloneNode(true); //clone the element
    document.body.appendChild(cloned); //add the cloned element to the page
}

<div id='test'>iadwjoam</div>
<input type="checkbox" id="xxx" name="xxx" onchange="addClone()" />

cloneNode()- https://developer.mozilla.org/en-US/docs/Web/API/Node.cloneNode

Answer 3

あなたはこのようなことを試すことができます

HTML

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

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

JS

//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("");
});

フィドル

アップデート

チェックボックスに関する部分は省略しました。UI の観点からは、これを達成するためにチェックボックスが必要だとは思いません。「これは完了したので先に進みたい」と示唆されているかどうかはわかりませんが、それはあなた次第です。ここに新しいフィドルがあります

HTML

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

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

JS

//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);
});

新しいフィドル