0

Eu estou criando essa função JavaScript, ela cria um form e adiciona no corpo do texto em uma outra div, só que quando eu clico no botão ele apaga o conteúdo que já estava escrito no input.

quando clico no botao executa o codigo

<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>  
1

3 Respostas 3

0

Utilize insertAdjacentHTML, é simples e nativo. Dessa forma você não precisa criar inúmeras linhas com createElement e nem utilizar as variás linhas desnecessárias do jQUery.

Com essa função basta você passar como primeiro parâmetro:

  • beforebegin: Antes do elemento.
  • afterbegin: Dentro do elemento, antes de seu primeiro filho
  • beforeend: Dentro do elemento, após seu último filho
  • afterend: Após o elemento.

O segundo parâmetro, você passa o seu HTML, por exemplo:

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>

1
0

Quando você precisar criar componentes dinamicos na página, sempre que possível tente utilizar a API do DOM para isto. Evite simplesmente concatenar uma string "HTML" no innerHTML do elemento. Dê uma olhada no código que fiz.. (não verifiquei se está tudo 100% os atributos setados no js, mas não é dificil de corrigir caso necessário algum detalhe)

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>

1
0

Você está usando Bootstrap que usa jQuery. Logo não precisa fazer "mirabolâncias" com JS puro. Aproveite as facilidades que o jQuery oferece e utilize o método .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);
}

Também é desnecessária essa declaração var htmlNovo = ""; e o return false;.

Exemplo:

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>

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .