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

这是具有 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

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

Appending Child resets previous appended element value on JavaScript

javascript

html

dom