javascript - Appending Child 会在 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