innerHTML与value的区别

话不多说，我们直接来看例子吧

html部分

	<div class="a">
        <input type="text" name="" placeholder="0">
        +
        <input type="text" name="" placeholder="0">
        =
        <span>?</span>
        <button>求和</button>
    </div>

效果如下(CSS样式可以根据自己的喜欢调)

JavaScript部分

		window.onload = function ()
		{
			var oInput = document.getElementsByTagName("input");
			var oBtn = document.getElementsByTagName("button")[0];
            var oSpan = document.getElementsByTagName("span")[0];

            for(var i = 0; i < oInput.length; i++)
            {
            	oInput[i].onkeyup = function ()
            	{
            		this.value = this.value.replace(/[^\d]/, "");
            	}
            }

            oBtn.onclick = function ()
            {
            	( oInput[0].value == "" && oInput[1].value == "" ) ? alert("请输入数字") : oSpan.innerHTML = oInput[0].value + oInput[1].value ;
            }
		}

其中两个input中的内容是value，而span显示的内容则为innerHTML

 oSpan.innerHTML = oInput[0].value + oInput[1].value

运行后的结果如下