附加子项在 JavaScript 上重置先前附加的元素值

Question

情况如下：我有一个带有一些输入文本框的表单和一个在单击时调用add() 函数的按钮。这是 HTML 代码：

<div id="resultdiv" style="display: none" align="center">
    <TEXTAREA id="resultcode" style="width: 100%; height: 70%"></TEXTAREA>
</div>
<div align="center" width="100%">
    <form>
        <input type="text" name="atrib" value="atrib name"><input type="text" name="val" value="default value"><br>
        <div id="bar"></div>
        <input type="button" value="Add" onclick="add();"><input type="button" value="Generate" onclick="gen();">
    </form>
</div>

add() 函数将两个新的输入表单添加到 id 为 bar 的 de div 中。这工作没有任何麻烦，问题是如果我添加一个新文本框并写入一些与默认值不同的值，一旦我再次单击“添加”按钮，就会创建一个新文本框，但前一个文本框的值创建的文本框再次更改为默认值！！！

这是带有 add() 函数的 JavaScript 代码：

function add() {
    //Create an input type dynamically.
    var element = document.createElement("input");
    var element2 = document.createElement("input");

    //Assign different attributes to the element.
    element.setAttribute("type", "text");
    element.setAttribute("value", "atrib name");
    element.setAttribute("name", "atrib");
    element2.setAttribute("type", "text");
    element2.setAttribute("value", "default value");
    element2.setAttribute("name", "val");

    // the div id, where new fields are to be added
    var bar = document.getElementById("bar");

    //Append the element in page (in span).
    bar.appendChild(element);
    bar.appendChild(element2);
    bar.innerHTML += "<br>";
}

这里是整个应用程序的 jsfiddle：http://jsfiddle.net/3a1kojgn/

如果我在每个 add() 调用中创建全新的元素，我不明白为什么在添加另一个文本框时，之前动态添加的文本框的值会重置。有什么提示吗？

Answer 1

试试这个

See the working Demo Here

您需要将行 bar.innerHTML += "<br>"; 更改为 bar.appendChild(element3);

function add() {
    //Create an input type dynamically.
    var element = document.createElement("input");
    var element2 = document.createElement("input");
    var element3 = document.createElement("br"); // Create element of <bt/>
    //Assign different attributes to the element.
    element.setAttribute("type", "text");
    element.setAttribute("value", "atrib name");
    element.setAttribute("name", "atrib");
    element2.setAttribute("type", "text");
    element2.setAttribute("value", "default value");
    element2.setAttribute("name", "val");

    // the div id, where new fields are to be added
    var bar = document.getElementById("bar");

    //Append the element in page (in span).
    bar.appendChild(element);
    bar.appendChild(element2);
    bar.appendChild(element3); // add <br/> element
}

JSFIDDLE

更新： - 下面的 DOM 元素属性可能导致浏览器执行 重排操作

• innerHTML
• offsetParent
• style
• scrollTop

innerHTML 只会在设置更改 DOM 时触发重排。

innerHTML 更改对象的 HTML，这肯定会影响大小和位置，并会触发至少部分回流。

See the reference link

Answer 2

改变这个：

    bar.innerHTML += "<br>";

收件人：

    bar.insertAdjacentHTML('beforeend', "<br>");

文档：https://developer.mozilla.org/en-US/docs/Web/API/Element/insertAdjacentHTML