原生js中的innerHTML的用法

上一篇簡單提到了innerHTML，那么現在我就通過一個簡單的模仿一下發消息的原理例子。接下來簡單布局一下：

<div id="box"></div>
<span id="span1">張三：</span>
<input type="text" id="text1"/>
<input id="Btn" type="button" value="按鈕" name=""/>

css也簡單寫一下：

   <style>
        #box{width:250px;height:300px;border:1px solid #e5e5e5;background:#f1f1f1;}
    </style>

布局展示如下：

想要實現的效果就是在input里寫內容，點擊發送，便會在上面的框中顯示出來；

下面就是js了，看看如何運用innerHTML了：

<script>
    window.onload= function(){
        var oBox=document.getElementById("box");
        var oSpan=document.getElementById("span1");
        var oText=document.getElementById("text1");
        var oBtn=document.getElementById("Btn");
        oBtn.onclick = function(){
            oBox.innerHTML =oBox.innerHTML  + oSpan.innerHTML +  oText.value + "<br/>";
            //oBox.innerHTML += oSpan.innerHTML + oText.value +  "<br/>";這是簡便的寫法，在js中 a=a+b ,那么也等同於 a+=b
            oText.value=""
        };
    }
</script>

 這便是實現之后的效果:

今天寫到這里，明天繼續go on！