JS-聊天框

效果图：

 

 

CSS部分：

        *{
            margin:0;
            padding: 0;
        }
        .box{
            width: 300px;
            height: 300px;
            border: 1px solid;
        }

HTML部分：

<input type="text">
<input type="button" value="留言">
<div class="box">

</div>

JS部分：

    var oIpt1=document.getElementsByTagName("input")[0];
    var oIpt2=document.getElementsByTagName("input")[1];
    var oDiv=document.getElementsByClassName("box")[0];
    oIpt2.onclick=function () {//利用函数作用域，每点击一次都是新的处理函数
        var oValue=oIpt1.value;
        var oTxt=document.createElement("div");
        var oFox=oDiv.getElementsByTagName("div")[0];//当box里边没有div时默认传入第一个空节点
            oDiv.insertBefore(oTxt,oFox);
            oTxt.innerHTML=oValue+"<input class='btn' type='button' value='删除'>";//创建的节点存在于函数内，并不在全局
        var oBut=document.getElementsByClassName("btn")[0];//所以每次获取的时候，都只获取到函数里的节点，只有一个
        oBut.onclick=function () {
            oTxt.innerHTML=""
        }
    }

有一点需要注意，当insertBefore的第二个参数为空节点或undefined时候，直接向父节点添加待加节点