I need help with extending the ability of the script to add an HTML tag to Dom .

Unfortunately, due to the lack of relevant knowledge and analogue in the network, I do not know how to extend this script to support adding not only in a single version, but also when choosing a value in select .

 var num = 1; var $namb = 3; function addQuestion() { if ($namb <= 25) { var newdiv = document.createElement("div"); newdiv.innerHTML = "<input name='voice_var_" + $namb + "'class='form-control' placeholder='Вариант ответа' type='text'><br>"; //newdiv.appendTo('div#quest'); document.getElementById("parentId").appendChild(newdiv); $namb++; return false; } } 
 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.css"> <div id="parentId"> </div> <a class="btn btn-info btm-sm" href="#" role="button" onclick="addQuestion()"> <span class="glyphicon glyphicon-plus" aria-hidden="true"></span> Добавить вариант ответа </a> <select class="form-control"> <option value="0">Установить кол-во</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> <option value="5">5</option> </select>

  • Users, you have a fetish woke up to a lot of minor edits, instead of one, but normal? - user207618
  • What is the actual question? At a choice in what should occur? - vp_arth

2 answers 2

To add several elements you can use the loop:

 var button = document.querySelector('.btn.btm-sm'), select = document.querySelector('.form-control'), list = document.querySelector('#parentId'); var $namb = 3; button.onclick = function(e) { // Отключаем стандарные действия по нажатию e.preventDefault(); // Получаем количество элементов var input_length = parseFloat(select.value); // Создаём цикл for(var i = 0; i < input_length; i++){ if ($namb <= 25) { // Добавляем элементы var newDiv = document.createElement("div"); newDiv.innerHTML = "<input name='voice_var_" + $namb + "'class='form-control' placeholder='Вариант ответа' type='text'><br>"; document.getElementById("parentId").appendChild(newDiv); $namb++; }; }; }; 
 <div id="parentId"> </div> <p> <a class="btn btn-info btm-sm" href="#" role="button"> <span class="glyphicon glyphicon-plus" aria-hidden="true"></span>Добавить вариант ответа </a> </p> <p> <select class="form-control"> <option value="0">Установить кол-во</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> <option value="5">5</option> </select> </p> 

     var num = 0, cntVars = document.getElementById('count_variants'), output = document.getElementById('parentId'); document.getElementById('add_variant').addEventListener('click', function(e) { e.preventDefault(); var tmp = document.createDocumentFragment(), newDiv; for (var i = 0; i < cntVars.value; i++) { if (num++ < 25) { newDiv = document.createElement('div'); newDiv.innerHTML = '<input name="voice_var_' + num + '" class="form-control" placeholder="Вариант ответа" type="text" >'; tmp.appendChild(newDiv); } } output.appendChild(tmp); cntVars.selectedIndex = 0; }); 
     <div id="parentId"> </div> <a class="btn btn-info btm-sm" href="#" role="button" id="add_variant"> <span class="glyphicon glyphicon-plus" aria-hidden="true"></span> Добавить вариант ответа </a> <select class="form-control" id="count_variants"> <option value="1">Установить кол-во</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> <option value="5">5</option> </select>