Javascript 如何添加输入文本并保留其他字段的值

Question

I am writing javascript function, which is adding fields as many as user want. Only one issue in my code: if user already something put to input, my code clean everything. Is it a way how to get HTML with value that user put? Or how to add new input and keep records in neighbors' fields.

var uniqid=ID(); 
document.getElementById("variablesContainer").outerHTML+='<div class="input-group" id="'+uniqid+'"><input type="text" class="form-control" placeholder="Enter new name of variable" aria-describedby="basic-addon1" style="width: 200px;"></div>';


var ID = function () {
  return '_' + Math.random().toString(36).substr(2, 9);
};

PS By policy I can't use JQuery and other framework. Only native Javascript .

Answer 1

CodePen link: https://codepen.io/pranaynailwal/pen/KKaPRGe?editors=1111

<div id="inputWrapper">
  <button onclick="addElem()" id="addNew">Add New Input</button>
  <ul id="insertInputs">
  </ul>
</div>

function getId() {
  return "_" + Math.random().toString(36).substr(2, 9);
}
var inputIds = [];
function addElem() {
  console.log("create element");
  var uniqid = getId();
  inputIds.push(uniqid); //adding here for reference
  document
    .getElementById("insertInputs")
    .insertAdjacentHTML(
      "beforeend",
      '<div class="input-group" id="' +
        uniqid +
        '"><input type="text" class="form-control" placeholder="Enter new name of variable" aria-describedby="basic-addon1" style="width: 200px;"></div>'
    );
}