Duplicate jquery code without refreshing and deleting text in form inputs

Question

I’m creating this Javascript function, it creates a form and adds in the body of text in another div, only when I click the button it deletes the content that was already written in the input.

<button onclick="addPergunta(); return false"  class="btn btn-warning  btnPrincipal"  name="2">ABERTA <i class="glyphicon glyphicon-plus-sign"></i> </button>
<script>
 var conti = 0;
        function addPergunta() {
        conti++;
        var htmlNovo = "";
        htmlNovo += 
                '<div class="main-login main-center">' +
                '<form class="form-horizontal" method="post" action="#">' +
                '<div class="form-group">' +
                '<label for="name" class="cols-sm-2 control-label">Digite sua pergunta.</label>' +
                '<div class="cols-sm-10">' +
                '<div class="input-group">' +
                '<span class="input-group-addon"><i class="fa fa-user fa" aria-hidden="true"></i></span>' +
                '<input type="text" class="form-control" name="pergunt' + conti + ' " id="name" placeholder="Qual seu nome?" />' +
                '</div></div></div></form></div></div></div></div></div>' + '';
        document.getElementById("multiplaescolha").innerHTML += htmlNovo;

        return false;
        }


 </script>  

Answer 1

When you need to create dynamic components on the page, whenever possible try using the DOM API for this. Avoid simply concatenating an "HTML" string into the innerHTML of the element. Take a look at the code I made.. (I haven’t checked if everything is 100% the attributes set in js, but it’s not hard to fix any details needed)

var container = document.querySelector("#perguntaContainer");
var btnAdd = document.querySelector("#addPergunta");

var perguntas = 0;

btnAdd.addEventListener('click', addPergunta);

function addPergunta() {
  let wrapper = document.createElement('div');
  wrapper.classList.add('main-login', 'main-center');
  
  let form = document.createElement('form');
  form.classList.add('form-horizontal');
  
  wrapper.appendChild(form);
  
  let formGroup = document.createElement('div');
  formGroup.classList.add('form-group');
  
  form.appendChild(formGroup);
  
  let nameLabel = document.createElement('label');
  nameLabel.setAttribute('for', 'name');
  nameLabel.classList.add('cols-sm-2', 'control-label');
  nameLabel.appendChild(document.createTextNode('Digite sua pergunta.'));
  
  formGroup.appendChild(nameLabel);
  
  let innerDiv = document.createElement('div');
  innerDiv.classList.add('cols-sm-10');
  
  formGroup.appendChild(innerDiv);
  
  let inputGroup = document.createElement('div');
  inputGroup.classList.add('input-group');
  
  innerDiv.appendChild(inputGroup);
  
  let inputGroupAddon = document.createElement('span');
  inputGroupAddon.classList.add('input-group-addon');
  
  inputGroup.appendChild(inputGroupAddon);
  
  let userIcon = document.createElement('i');
  userIcon.classList.add('fa', 'fa-user');
  userIcon.setAttribute('aria-hidden', 'true');
  
  inputGroupAddon.appendChild(userIcon);
  
  let input = document.createElement('input');
  input.type = 'text';
  input.id = 'name';
  input.placeholder = 'Qual seu nome?';
  input.name = 'pergunt' + (perguntas++);
  input.classList.add('form-control');
  
  inputGroup.appendChild(input);
  
  container.appendChild(wrapper);
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">

<button id="addPergunta">Nova Pergunta</button>
<div id="perguntaContainer"></div>

Answer 2

You are using Bootstrap that uses jQuery. Soon you do not need to do "mirabolâncias" with pure JS. Take advantage of jQuery’s facilities and use the method .append():

var conti = 0;
function addPergunta() {
   conti++;
   var htmlNovo = 
          '<div class="main-login main-center">' +
          '<form class="form-horizontal" method="post" action="#">' +
          '<div class="form-group">' +
          '<label for="name" class="cols-sm-2 control-label">Digite sua pergunta.</label>' +
          '<div class="cols-sm-10">' +
          '<div class="input-group">' +
          '<span class="input-group-addon"><i class="fa fa-user fa" aria-hidden="true"></i></span>' +
          '<input type="text" class="form-control" name="pergunt' + conti + ' " id="name" placeholder="Qual seu nome?" />' +
          '</div></div></div></form></div></div></div></div></div>' + '';
   $("#multiplaescolha").append(htmlNovo);
}

This statement is also unnecessary var htmlNovo = ""; and the return false;.

Example:

var conti = 0;
function addPergunta() {
   conti++;
   var htmlNovo = 
          '<div class="main-login main-center">' +
          '<form class="form-horizontal" method="post" action="#">' +
          '<div class="form-group">' +
          '<label for="name" class="cols-sm-2 control-label">Digite sua pergunta.</label>' +
          '<div class="cols-sm-10">' +
          '<div class="input-group">' +
          '<span class="input-group-addon"><i class="fa fa-user fa" aria-hidden="true"></i></span>' +
          '<input type="text" class="form-control" name="pergunt' + conti + ' " id="name" placeholder="Qual seu nome?" />' +
          '</div></div></div></form></div></div></div></div></div>' + '';
   $("#multiplaescolha").append(htmlNovo);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="multiplaescolha"></div>
<button onclick="addPergunta(); return false"  class="btn btn-warning  btnPrincipal"  name="2">ABERTA <i class="glyphicon glyphicon-plus-sign"></i> </button>

Answer 3

Utilize insertAdjacentHTML, is simple and native. That way you don’t need to create numerous lines with createElement and do not use the unnecessary lines of the jQUery.

With this function you just pass as first parameter:

• beforebegin: Before the element.
• afterbegin: Inside the element, before your first child
• beforeend: Inside the element, after your last child
• afterend: After the element.

The second parameter, you pass your HTML, for example:

function addPergunta() {
        conti++;
        var htmlNovo = "";
        htmlNovo += 
                '<div class="main-login main-center">' +
                '<form class="form-horizontal" method="post" action="#">' +
                '<div class="form-group">' +
                '<label for="name" class="cols-sm-2 control-label">Digite sua pergunta.</label>' +
                '<div class="cols-sm-10">' +
                '<div class="input-group">' +
                '<span class="input-group-addon"><i class="fa fa-user fa" aria-hidden="true"></i></span>' +
                '<input type="text" class="form-control" name="pergunt' + conti + ' " id="name" placeholder="Qual seu nome?" />' +
                '</div></div></div></form></div></div></div></div></div>' + '';


        document.getElementById("multiplaescolha").insertAdjacentHTML('beforeend', htmlNovo);

        return false;
        }

let conti = 0;

function addPergunta() {
  conti++;
  var htmlNovo = "";
  htmlNovo +=
    '<div class="main-login main-center">' +
    '<form class="form-horizontal" method="post" action="#">' +
    '<div class="form-group">' +
    '<label for="name" class="cols-sm-2 control-label">Digite sua pergunta.</label>' +
    '<div class="cols-sm-10">' +
    '<div class="input-group">' +
    '<span class="input-group-addon"><i class="fa fa-user fa" aria-hidden="true"></i></span>' +
    '<input type="text" class="form-control" name="pergunta' + conti + ' " id="name" placeholder="Qual seu nome?" />' +
    '</div></div></div></form></div></div></div></div></div>' + '';


  document.getElementById("multiplaescolha").insertAdjacentHTML('beforeend', htmlNovo);

  return false;
}

<div id="multiplaescolha"></div>
<button type="button" onClick="addPergunta()">Adiciona pergunta</button>