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>";
}

这里是整个应用程序的一个小问题：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

Appending Child重置JavaScript上的前一个附加元素值

2 个答案: