javascript - 每次单击按钮时添加新的 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() 覆盖当前内容。使用 append() 添加一个新的，如下所示:

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

这是 jQuery.append 的文档和 jQuery.html !