添加 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", "...");

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

将现有的 DOM 个节点序列化为 HTML
将新的 HTML 片段连接到序列化节点
销毁旧节点
用新节点重新创建节点

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

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

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

字符串是...

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

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

添加 appendchild 后保留值

keeping values after adding an appendchild

html

javascript

dom

appendchild