Appending Child重置JavaScript上的前一个附加元素值 [英] Appending Child resets previous appended element value on JavaScript

问题描述

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

The situation is the following: I've got a form with some input textboxes and a button that calls the add() function when clicked. This is the HTML code:

<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 。这没有任何麻烦，问题是如果我添加一个新的文本框并写一些与默认值不同的值，只要再次单击添加按钮，就会创建一个新的文本框，但是前面的值创建的文本框再次更改为默认值！

The add() function adds two new input forms into de div with id bar. This is working without any troubles, the problem is that if I add a new textbox and write some value different from the default one, as soon as I click again on the Add button, a new textbox is created, but the value of the previous created textbox is changed to the default value again!!!

以下是 add（）函数的JavaScript代码：

Here is the JavaScript code with the add() function:

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/

And here a jsfiddle of the whole application: http://jsfiddle.net/3a1kojgn/

我不明白为什么如果我在每个 add（）调用上创建全新元素，则在添加另一个文本框时，先前动态添加的文本框的值会重置。任何提示人员？

I don't understand why the value of the previous dynamicly added textbox resets when adding another one if I'm creating brand new elements on each add() call. Any hint guys?

推荐答案

试试这个

查看此处的工作演示

See the working Demo Here

您需要将行 bar.innerHTML + =< br>; 更改为栏。 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

JSFIDDLE

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

• innerHTML


• offsetParent


• 风格


• scrollTop

• innerHTML
• offsetParent
• style
• scrollTop

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

innerHTML will only trigger a reflow when setting it changes the DOM.

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

innerHTML changes the HTML of an object which certainly can affect size and position and will trigger at least a partial reflow.

参见参考链接

这篇关于Appending Child重置JavaScript上的前一个附加元素值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！