значения учет после добавления AppendChild

Question

У меня есть проблема ... это мой код

<script lenguaje="javascript"> 
     var cont = 1; 

     function add() { 
      if (cont != 11) { 
       var textoagregar = document.createTextNode("Agregar alternativas"); 
       var espacio = document.createElement("br"); 
       var element = document.createElement("input"); 

       element.setAttribute("type", "text"); 
       element.setAttribute("name", "preguntas[]"); 
       element.setAttribute("id", "id" + cont); 
       var foo = document.getElementById("fooBar"); 
       foo.appendChild(element); 
       foo.innerHTML += "<input type='button' value='+' onclick='agregaralternativa(" + cont + ")'><input type='button' value='-' onclick='removeralternativa(" + cont + ")'><div id='" + cont + "'></div>"; 
     foo.appendChild(espacio); 
     cont++; 
      } 

     } 

     function remover() { 
      if (cont > 1) { 
       cont--; 
       var foo = document.getElementById("fooBar"); 
       var child = document.getElementById("id" + cont); 
       foo.removeChild(child); 
       var lChild = foo.lastElementChild; 
       foo.removeChild(lChild); 
       var lChild = foo.lastElementChild; 
       foo.removeChild(lChild); 
       var lChild = foo.lastElementChild; 
       foo.removeChild(lChild); 
       var lChild = foo.lastElementChild; 
       foo.removeChild(lChild); 
      } 

     } 

     function agregaralternativa(id) { 


      var panel = document.getElementById(id); 

      panel.innerHTML += "<input type='text value='alternativa" + id + "[]'><br>"; 

     } 

     function removeralternativa(id) { 


      var panel = document.getElementById(id); 

      var lChild = panel.lastElementChild; 
      panel.removeChild(lChild); 
      var lChild = panel.lastElementChild; 
      panel.removeChild(lChild); 

     } 
     </script> 

     <div class="form-group"> 
      <label class="col-md-4 control-label">Ingrese preguntas</label> 
      <div class="col-md-6"> <span id="fooBar"></span> 
       <INPUT type="button" value="Remover" onclick="remover()" /> 
       <INPUT type="button" value="Agregar" onclick="add()" /> 
      </div> 
     </div> 

и каждый раз, когда вы добавляете текстовое поле с помощью кнопок + или «agregar Pregunta» все остальные значения исчезают , как я могу добавлять текстовые поля без потери существующих значений полей?

Answer 1

Вы уничтожаете элементы ранее созданные, когда вы делаете это:

panel.innerHTML += "..."; 

Вместо этого используйте insertAdjacentHMTL(), если вы хотите добавить, используя HTML-разметку.

panel.insertAdjacentHTML("beforeend", "..."); 

Теперь вместо того, чтобы идти через этот разрушительный процесс ...

1. сериализации существующие DOM узлы HTML
2. сцепить новый фрагмент HTML в сериализованными узлы
3. уничтожить старые узлы
4. воссоздать узлы с новыми узлами

... он просто создает новое содержимое и помещает его перед закрытием элемента body.

В принципе, удалите element.innerHTML += ... из ваших правил кодирования. Это никогда не нужно, это неэффективно, и это вызывает проблемы, как то, что вы описали.

---

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

Струны ...

• "beforebegin"
• "afterbegin"
• "beforeend"
• "afterend"

этикетки довольно очевидны. Они позиционируют новое содержимое перед текущим элементом, внутри текущего элемента в начале, внутри текущего элемента в конце или после текущего элемента соответственно.