在添加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 += "...";

如果要使用HTML标记附加，请使用insertAdjacentHMTL()。

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

现在不是经历这个破坏性的过程......

1. 将现有DOM节点序列化为HTML
2. 将新的HTML片段连接到序列化节点
3. 销毁旧节点
4. 使用新节点重新创建节点

...它只是创建新内容并将其放在body元素结束之前。

基本上，从您的编码实践中删除element.innerHTML += ...。它从来没有必要，它效率低下，它会导致像你所描述的那样的问题。

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

字符串是......

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

标签非常明显。它们将新内容定位在当前元素之前，分别位于当前元素的开头，当前元素内部或当前元素之后。