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中它仍然具有旧值＆＃34;，所以当你这样做时 -

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

新值不会出现，因为在HTML中它的旧值＆＃34;

希望你明白我的意思，如果你没有然后右键点击每个小提琴输入然后点击浏览器中的inspect元素，你会在标记中看到值=＆＃34;旧值＆＃ 34;并显示＆＃34;新价值＆＃34;在第一个小提琴。 .innerHTML获取HTML标记，然后连接并最终附加它。

更新：根据您的需要创建input的正确方法是 -

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

通过javascript更改输入值

1 个答案: