Changing input value via javascript

Question

I am trying to change input value via javascript. Everything works fine and the input value was changed successfully in this jsfiddle - http://jsfiddle.net/webvitaly/dbv0vuhz/6/

(function () {
    function form_init() {

        var elements,
        len,
        i;

        elements = document.querySelectorAll('.input');
        len = elements.length;
        for (i = 0; i < len; i++) {
            elements[i].value = 'new value';
            console.log(elements);
            console.log(elements[i].value);
        }

        var dynamic_control = '<input type="text" class="input-dynamic" value="dynamic value" />';

        elements = document.querySelectorAll('form');
        len = elements.length;
        for (i = 0; i < len; i++) {
            //elements[i].innerHTML += dynamic_control;
        }

    };

    if (document.addEventListener) {
        document.addEventListener('DOMContentLoaded', form_init, false);
    }

    setTimeout(function () { // set 1 second timeout
        form_init();
    }, 1000);
})();

But when I am trying to add another input to the form via javascript the previous code does not work and the input value was not changed - http://jsfiddle.net/webvitaly/dbv0vuhz/5/

Can you tell me what I am doing wrong?

Answer 1

The HTML structure of the first input is still value="old value", the new value you set through JS, updates the DOM but in the HTML it still have "old value", so when you do this -

elements[i].innerHTML += dynamic_control; // concatenate with the input "old value" in html because in markup it's old value

the new value will not appear because in the HTML its "old value"

hope you understood what I mean, if you didn't then just right click on each fiddle input and then click inspect element from your browser, you will see in the markup saying value="old value" and showing "new value" in the first fiddle. The .innerHTML gets the HTML markup and then concatenates and finally append it.

UPDATE: The correct way of creating input as per your need will be -

/* create input element this way */
var dynamic_control = document.createElement('input');
dynamic_control.setAttribute('type', 'text');
dynamic_control.setAttribute('class', 'input-dynamic');
dynamic_control.setAttribute('value', 'dynamic value');

elements = document.querySelectorAll('form');
len = elements.length;
for (i = 0; i < len; i++) {
    elements[i].appendChild(dynamic_control); // append the input element as a child of elements[i]
}

Use appendChild() instead of innerHTML.

Working Fiddle!