首先给大家说一声抱歉，小编最近和女朋友闹矛盾，断更了一周呀 唉，实在是罪过呀，不远两千多公里从北京跑到广州，哄女朋友开心，我也没谁了 宝宝心里苦，宝宝就是不说。 好了，言归正传，咱们回到就是实现发短信的功能，其实这个很好实现的主要的是创建元素（document.createElement），然后给元素添加子节点（appendChild） 结合这两点。 首先给出效果图，嘿嘿嘿嘿~~~

对话有点儿邪恶，大家当做段子听听就可以了

咳咳咳，我们还是想先把门户（html + css）写好

<style>*{box-sizing: border-box;}body,html{height: 100%;  overflow: hidden;}ul{ padding: 0;  margin: 10px 0;  list-style: none;}.main{width: 650px;}.main>*{float: left;}.user{padding-right: 50px;}.user section{border: 1px solid #ccc;background-color: #eee; border-radius:       5px;margin-bottom: 50px;padding: 30px;}.user input[type=text]{width: 100%;}#send1{background-color: dodgerblue;}#send2{background-color: forestgreen;}    .box{border:1px solid #ccc; background-color: #eee;  width: 300px; height: 500px; overflow-y: auto;}.box li{padding: 10px;  position: relative;  min-height: 60px;}.box li:before{content: '';  width: 40px; height: 40px; position: absolute;  top:10px;    }.box .left{padding-left: 60px;    }.box .left:before{left:10px;background: url(img/u1.jpg); background-size: cover;    }    .box .right{padding-right: 60px; text-align: right;    }.box .right:before{right:10px; background: url(img/u2.jpg); background-size: cover;    }    .box span{word-break: break-all;  border-radius: 5px ;        background: #fff;  line-height: 30px; display: inline-block;        padding: 5px;  font-size: 14px;    }.box .right span{        background: lime;    }
</style>
<div class="main"><div class="user"><section><input type="text" id="user1-mess"><input type="button" id="send1" value="发送"></section><section><input type="text" id="user2-mess"><input type="button" id="send2" value="发送"></section></div><div class="box"><ul id="mess-list"></ul></div>
</div>
复制代码

这段代码大家使用的时候注意一下，style和div添加相应的样式和body里边儿。 下面就来说说js实现部分了，我们采用的是原生js，纯手工打造，价值可是很高的哦

   <script>
//        获取id的函数封装function $(id) {return document.getElementById(id);}var messFir = $('user1-mess');var messSec = $('user2-mess');var list = $('mess-list');
//        第一个按钮的点击事件$('send1').onclick = function () { createMess(messFir.value,'left');messFir.value = '';};
//        第二个按钮的点击事件$('send2').onclick = function () {createMess(messSec.value,'right');messSec.value = ''; };
//        接收到信息后创建一个li标签function createMess(text,style) {var li = document.createElement('li');li.className = style;var span = document.createElement('span');span.innerText = text;
//            将span添加到li标签下边儿li.appendChild(span);
//            将li标签添加到ul下边儿list.appendChild(li);}</script>
复制代码

我相信看了我的源码之后，你可以很好的理解其中的实现原理，个人感觉原生js除了代码量大外，用着还是很灵活的，可以尝试尝试封装自己想要用的方法。

有错误的地方欢迎大家，指正错误，谢谢大家~@^_^@~