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>

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!!!

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

And here a jsfiddle of the whole application: /

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?

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>

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!!!

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

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

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?

• javascript
• html
• dom

• I can't tell you why, but removing this line bar.innerHTML += "<br>"; , it works – Flakes Commented Feb 18, 2015 at 12:13
• Oh, that's nice! But I've got the problem of bad formatting (inline) of the new inputs if I remove that line :( – Cornezuelo del Centeno Commented Feb 18, 2015 at 12:17
• yes there is solution for bad formatting - see the below answer – prog1011 Commented Feb 18, 2015 at 12:19

2 Answers 2

Try This

See the working Demo Here

You need to change line bar.innerHTML += "<br>"; to 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

UPDATE: - Below DOM element properties can cause browser to perform a reflow operation

• innerHTML
• offsetParent
• style
• scrollTop

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

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

See the reference link

Change this:

    bar.innerHTML += "<br>";

To:

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

Documentation: https://developer.mozilla/en-US/docs/Web/API/Element/insertAdjacentHTML