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

情况如下：我有一个表单，其中包含一些输入文本框和一个按钮，单击该按钮时调用

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（）

调用中创建全新的元素，我不理解为什么在添加另一个文本框时，上一个动态添加的文本框的值会重置。有什么提示吗伙计们？试试这个

您需要更改行

bar.innerHTML+=“
”到
条。附加子元素（元素3）

函数添加（）{
//动态创建输入类型。
var元素=document.createElement（“输入”）；
var element2=document.createElement（“输入”）；
var element3=document.createElement（“br”）；//创建的元素
//为元素指定不同的属性。
setAttribute（“类型”、“文本”）；
element.setAttribute（“值”、“属性名”）；
元素。setAttribute（“名称”、“atrib”）；
element2.setAttribute（“类型”、“文本”）；
element2.setAttribute（“值”、“默认值”）；
element2.setAttribute（“名称”、“值”）；
//要添加新字段的div id
var bar=document.getElementById（“bar”）；
//在页面中追加元素（在span中）。
条.子元素（元素）；
附加子元素（元素2）；
bar.appendChild（element3）；//添加
元素
}


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


innerHTML
offsetParent
style
scrollTop

innerHTML
仅在设置更改DOM时触发回流

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

更改此选项：

    bar.innerHTML += "<br>";

bar.innerHTML+=“
”；

致：

bar.insertAdjacentHTML（'beforeend'，“
”）；

文档：
我无法告诉您原因，但删除这一行
bar.innerHTML+=“
”，很好用哦，太好了！但是如果我删除了那一行，我就遇到了新输入的错误格式（内联）的问题：（是的，有解决错误格式的方法-见下面answer@CornezuelodelCenteno-结帐link@CornezuelodelCenteno-很高兴帮助您：）-
upvote
答案-它将帮助其他人找到正确的解决方案。谢谢！那很有魅力！顺便说一句，它并没有告诉我为什么这样做有效，而是添加了br with
bar.innerHTML+=“
”
会导致这种奇怪的行为：如果您或任何人能够解释我非常乐意了解的逻辑或原因：）可能的解释：通过更改innerHTML，您导致浏览器回流/重新显示HTML文本，导致所有相应的数据结构被重建和重新初始化。这与此无关使用回流，这是关于布局的，但是关于用新的dom节点替换dom节点的
.innerHTML
<代码>+=
分解为
element.innerHtml=element.innerHtml+newValue
。也就是说，它将内容替换为字符串，而不是DOM树。这意味着所有dom属性（包括文本值）都将丢失。
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
}

    bar.innerHTML += "<br>";

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