Appending Child resets previous appended element value on JavaScript

Question

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.net/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?

I can't tell you why, but removing this line `bar.innerHTML += "
";` , it works — Flakes, Feb 18 '15 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, Feb 18 '15 at 12:17
yes there is solution for bad formatting - see the below answer — prog1011, Feb 18 '15 at 12:19

score 4 · Accepted Answer · edited May 23 '17 at 12:19

4

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

edited May 23 '17 at 12:19

Community

1
1

answered Feb 18 '15 at 12:15

prog1011

3,425
3
30
57

@CornezuelodelCenteno - Checkout the link – prog1011 Feb 18 '15 at 12:17
@CornezuelodelCenteno - Glad to help you :) - `upvote` the answer - it will helps other to find the correct solution. – prog1011 Feb 18 '15 at 12:20
Thanks! That worked like a charm! By the way, it instead doesn't make any logic to me why this works but adding the br with `bar.innerHTML += "
";` leads to that strange behaviour :S If you or anyone could explain the logic or reasons behind that I would be really pleased to learn :) – Cornezuelo del Centeno Feb 18 '15 at 12:21
1

Likely explanation : by changing the innerHTML you are causing the browser to reflow/redisplay the HTML text causing all corresponding data structures to be rebuilt and re-initialized. – HBP Feb 18 '15 at 12:26
@HBP - yes I agreed with you. See the updated answer above :) – prog1011 Feb 18 '15 at 12:31
@CornezuelodelCenteno - see the explanation - updated answer above. – prog1011 Feb 18 '15 at 12:32
Thank you both for your efforts! Now I learned about something I didn't knew: reflow/redisplaying when using some element properties. Also, you solved the problem of my script, so a thousands thanks! :D – Cornezuelo del Centeno Feb 18 '15 at 12:39
1

It has nothing to do with a reflow, which is about layout, but about the `.innerHTML` replacing the dom nodes with new ones. `+=` decomposes to `element.innerHtml = element.innerHTML + newValue`. I.e. it replaces the contents as a String, not as a DOM tree. Which means all dom properties, including text values get lost. – the8472 Feb 18 '15 at 14:25

score 2 · Answer 2 · answered Jun 04 '21 at 19:43

2

Change this:

    bar.innerHTML += "<br>";

To:

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

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

answered Jun 04 '21 at 19:43

Akshay Chugh

43
6

This is the way to go if you don't want to (or can't) create a new element to use with `appendChild()`. – David Gay Sep 30 '21 at 06:12

Appending Child resets previous appended element value on JavaScript

2 Answers2

Linked

Related