Добавить новый элемент с jQuery

Question

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

Используя простой javascript, я придумал решение, в котором нужно было бы нажимать кнопки на количество раз, которое соответствует количеству вопросов/вариантов, которые требуется, перед добавлением текста. Значения в текстовых полях просто стираются каждый раз, когда вы нажимаете кнопку.

function addQuestion() { 
numberOfQuestions++; 
var container = document.getElementById("container"); 
container.innerHTML += (...); 
} 

Как я могу улучшить это, скажем, jQuery? Я тестировал это:

$("button#newQuestion") 
    .click(
      function() { 
       numberOfQuestions++; 
       var container = document 
         .getElementById("container"); 
       container.append(...); 
      }); 

Заранее благодарен!

Answer 1

В JQuery это может быть:

numberOfQuestions=0; 
 
$("button#newQuestion").click(function() { 
 
    numberOfQuestions++; 
 
    $("#container").append('<li>'+numberOfQuestions+'</li>'); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<button id="newQuestion">Add Question</button> 
 
<ul id="container"> 
 
    
 
</ul>

Answer 2

HTML код

<div id="container"></div> <button id="newQuestion">newQ</button>

JQuery код $(document).ready(function(){ var NOQ = $("#container").find(".q").length; $("#newQuestion").click(function() { NOQ++; $("#container").append("<div id='q"+NOQ+"' class='q'>Question "+NOQ+"?</div>"); }); });

jsFiddle: http://jsfiddle.net/rL6xmdfh/3/