javascript - 通过 javascript 更改输入值

Question

我正在尝试通过 JavaScript 更改输入值。 一切正常，输入值已在此 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);
})();

但是当我尝试通过 javascript 添加另一个输入到表单时，前面的代码不起作用并且输入值没有更改 - http://jsfiddle.net/webvitaly/dbv0vuhz/5/

你能告诉我我做错了什么吗？

Answer 1

第一个input的HTML结构仍然是value="old value"，您通过JS设置的新值，更新了DOM，但在HTML中它仍然具有“旧值”，所以当你这样做时 -

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

新值不会出现，因为在 HTML 中它是“旧值”

希望您明白我的意思，如果您不明白的话，只需右键单击每个 fiddle 输入，然后单击浏览器中的检查元素，您将在标记中看到 value="old value"并显示“new value” “在第一把 fiddle 中。 .innerHTML 获取 HTML 标记，然后连接并最后附加它。

更新:根据您的需要创建输入的正确方法是 -

/* 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]
}

使用appendChild()而不是innerHTML。

<强> Working Fiddle!