ボタンをクリックするたびに新しいdivを追加する

Question

質問フォームを作成して質問を追加し、質問する質問のタイプを変更できるページを作成しようとしています。 Googleフォームとほとんど同じです。質問のタイプに基づいて、作成された質問の下にボックスが表示されます。私がこれをしようとすると、ボックスは最後の質問にのみ表示されるので、私は新しい質問が追加されるたびに上書きされると思います。すべての質問の下にボックスを作成する方法に関するヒント

function createQuest() { 
 
    number++; 
 
    chooseTime(); 
 

 
    outputQuestion += '<div id="question' + number + '>'; 
 
    outputQuestion += '<p id="k"></p>'; 
 
    outputQuestion += '<h2>Question' + number + '</h2>'; 
 
    outputQuestion += '<form name="choose">'; 
 
    outputQuestion += '<textarea rows="1" cols="30" id="question' + number + '" name="text" placeholder="Question"></textarea>'; 
 
    outputQuestion += '<select id="sel' + number + '">'; 
 
    outputQuestion += '<option id="' + number + '" id="TEXT" onclick()>Text</option>'; 
 
    outputQuestion += '<option id="' + number + '" id="SLIDER">Rating</option>'; 
 
    outputQuestion += '</select>'; 
 

 

 
    outputQuestion += '<ul id="list-quest' + number + '">'; 
 
    outputQuestion += '</ul>'; 
 
    outputQuestion += '</form>'; 
 
    outputQuestion += '</div>'; 
 
    $("#list-create-doc").html(outputQuestion); 
 
    textChosen(number); 
 
} 
 

 
var outputQuest1 = ""; 
 

 
function textChosen(nr) { 
 
    outputQuest1 = ""; 
 

 
    outputQuest1 += '<div class="textbox" id="txt">'; 
 
    outputQuest1 += '<textarea rows="1" cols="30" placeholder="Answered with text"></textarea>'; 
 
    outputQuest1 += '</div>'; 
 

 
    var whereAdd = "#list-quest" + nr; 
 
    console.log(whereAdd); 
 
    $(whereAdd).html(outputQuest1); 
 
}

<button id="btn" onclick="createQuest()">Legg til spørsmål</button>

Answer 1

あなたはhtml()を使用することによって、現在の内容を上書きしています。ここで

$("#list-create-doc").append(outputQuestion); 

がjQuery.appendとjQuery.htmlのためのドキュメントです。このような新しいものを追加するappend()を使用してください！