Javascript 在添加子对象后保留值

我有个问题。。。这是我的密码

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

var-cont=1；
函数add（）{
如果（续=11）{
var textoagregar=document.createTextNode（“Agregar alternativas”）；
var espacio=document.createElement（“br”）；
var元素=document.createElement（“输入”）；
setAttribute（“类型”、“文本”）；
setAttribute（“名称”，“preguntas[]”）；
setAttribute（“id”、“id”+cont）；
var foo=document.getElementById（“fooBar”）；
foo.appendChild（元素）；
foo.innerHTML+=“”；
foo.appendChild（espacio）；
cont++；
}
}
函数删除程序（）{
如果（续>1）{
续--；
var foo=document.getElementById（“fooBar”）；
var child=document.getElementById（“id”+cont）；
foo.removeChild（儿童）；
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）；
}
}
功能失律代偿（id）{
var panel=document.getElementById（id）；
panel.innerHTML+=“执行此操作时会销毁以前创建的元素：

panel.innerHTML += "...";

如果要使用HTML标记进行追加，请使用
insertAdjacentHMTL（）

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

现在，与其经历这个破坏性的过程

将现有DOM节点序列化为HTML
将新的HTML片段连接到序列化节点
销毁旧节点
使用新节点重新创建节点
…它只是创建新内容并将其放置在
正文
元素结束之前

基本上，从您的编码实践中删除
element.innerHTML+=…
。这是不必要的，效率低下，并且会导致类似您所描述的问题


仅供参考，
.insertAdjacentHTML（）
方法接收4种不同的字符串可能性作为第一个参数。每种可能性都指定了相对于要调用它的元素的位置

字符串是


“开始之前”
“afterbegin”
“结束前”
“afterend”

这些标签是不言自明的，它们分别将新内容定位在当前元素之前、当前元素内部的开头、当前元素内部的结尾或当前元素之后