Как дублировать div, установив флажок?

Question

Я хочу, чтобы пользователь мог создать неопределенное количество вопросов. Как только пользователь создал один вопрос, я хочу, чтобы появился еще один вопрос (вопрос 2) и т. Д.

Как бы я это сделал?

Благодаря

Answer 1

вы можете попробовать что-то вроде этого

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

FIDDLE

UPDATE

я ушел из часть о флажком, с точки зрения пользовательского интерфейса, я не думаю, что вам нужно checkbox, чтобы убедиться в этом, не уверен, что он предлагает «это сделано, и я хочу двигаться дальше», но это вам решать. Вот новый скрипку

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

NEW FIDDLE

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

В 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 4

Вот более или менее то, что я хотел бы сделать, используя чистый JavaScript (см комментариев для объяснения)

// Create a copy of a blank Question node 
 
question_template = document.getElementById("questions").firstElementChild.cloneNode(true); 
 
// A nice cloning wrapper 
 
new_question = function(){return question_template.cloneNode(true);}; 
 
// Something to do when the user is finished putting in questions 
 
alrt = function(){ 
 
    alert(Array.prototype.map.call(document.getElementById(
 
     "questions").getElementsByTagName("input"), 
 
     function(elt){return elt.value;})); 
 
}; 
 
// Hook for when text is placed in textbox 
 
addnew = function(){ 
 
    // Remove the event listener (If you don't do this, then on every 
 
    // keystroke a new box will be created 
 
    document.getElementById("questions").lastElementChild.oninput = function(event){}; 
 
    // Add a new line 
 
    document.getElementById("questions").appendChild(document.createElement("br")); 
 
    // Add a new question box 
 
    document.getElementById("questions").appendChild(new_question()); 
 
};

<div id="questions"> 
 
<input type="text" oninput="addnew()"/> 
 
</div> 
 
<input type="button" value="Done" onclick="alrt()"/>

UPDATE: Я только что видел ваша разработка в разделе комментариев главного сообщения. Вы могли бы реализовать что-то вроде этого:

// Create a copy of a blank Question node 
 
question_template = document.getElementById("questions").firstElementChild.cloneNode(true); 
 
// A nice cloning wrapper 
 
new_question = function(){return question_template.cloneNode(true);}; 
 
// Something to do when the user is finished putting in questions 
 
alrt = function(){ 
 
    alert(Array.prototype.map.call(document.getElementById(
 
     "questions").getElementsByTagName("input"), 
 
     function(elt){return elt.value;})); 
 
}; 
 
// Hook for when text is placed in textbox 
 
addnew = function(){ 
 
    // Add a new line 
 
    document.getElementById("questions").appendChild(document.createElement("br")); 
 
    // Add a new question box 
 
    document.getElementById("questions").appendChild(new_question()); 
 
};

<div id="questions"> 
 
    <input type="text"/> 
 
    </div> 
 
<input type="button" value="Add Another" onclick="addnew()"/> 
 
    <input type="button" value="Done" onclick="alrt()"/>

Это может быть реализовано с большинством любого input элемента с нужными событиями. Школы W3 имеют a nice reference, если вам это нужно.