如何将input的value值的变化更新到innerHTML？

问题描述：input输入内容，查看html结构，value值仍是默认值，未设置默认值的情况也是空。

如果我想获取到这个变化，应该如何处理呢？

解决办法：（jquery实现）

(function ($) {
    var oldHTML = $.fn.html;
    $.fn.formhtml = function () {
        if (arguments.length) 
            return oldHTML.apply(this, arguments);
        $("input,textarea,button", this).each(function () {
            this.setAttribute('value', this.value);
        });
        $(":radio,:checkbox", this).each(function () {
            // im not really even sure you need to do this for "checked"
            // but what the heck, better safe than sorry
            if (this.checked) 
                this.setAttribute('checked', 'checked');
            else 
                this.removeAttribute('checked');
        });
        $("option", this).each(function () {
            // also not sure, but, better safe...
            if (this.selected) 
                this.setAttribute('selected', 'selected');
            else 
                this.removeAttribute('selected');
        });
        return oldHTML.apply(this);
    };

    //optional to override real .html() if you want
    // $.fn.html = $.fn.formhtml;
})(jQuery);

通过测试：console.log($("body").formhtml());   可以捕捉到变化：

问题解决！

结论：

• 非闭合标签（起始标记<span>，结束标记</span>）可以使用innerHTML来赋值。如：div、span。
• 闭合标签（<input /> 起始和结束都在一个标记内，不能再嵌入其他元素）要使用value来赋值：如input。

补充说明：

1、jquery使用attr("value",xxx)可以，val("xxx") 则不可以；

2、document.getElementsByTagName("html")[0].innerHTML 对应的js方式实现，

可以参考jquery的fromhtml思路，修改属性value的值。  —— do more  and think more！