First of all to say sorry to everyone, xiaobian and his girlfriend recently conflicted, broken more than a week ah ah, it is a sin ah, not far more than two thousand kilometers from Beijing to Guangzhou, to coax his girlfriend happy, I did not who the baby heart bitter, the baby is not to say. Well, let’s get back to implementing SMS, which is well implemented by creating the element (document.createElement) and adding a child to the element (appendChild). First give the renderings, heh heh heh

Ahem, we still want to write the portal (HTML + CSS) first

<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="Send">
        </section>
        <section>
            <input type="text" id="user2-mess">
            <input type="button" id="send2" value="Send">
        </section>
    </div>
    <div class="box">
        <ul id="mess-list"></ul>
    </div>
</div>
Copy the code

Notice when you use this code, add the corresponding style and body edges to the style and div. The following part of the JS implementation, we use native JS, handmade, but the value is very high

<script> // Get the function encapsulation of the IDfunction $(id) {
            return document.getElementById(id);
        }
        var messFir = $('user1-mess');
        var messSec = $('user2-mess');
        var list = $('mess-list'); // first button click event $('send1').onclick = function () { 
           createMess(messFir.value,'left');
            messFir.value = ' '; }; // The second button click event $('send2').onclick = function () {
            createMess(messSec.value,'right');
            messSec.value = ' '; }; // Create a li tag after receiving the messagefunction createMess(text,style) {
            var li = document.createElement('li');
            li.className = style;
            var span = document.createElement('span'); span.innerText = text; AppendChild (span); // add span to the bottom of the li tag. AppendChild (li); // Add the li tag to the underside of ul. } </script>Copy the code

I believe that after reading my source code, you can well understand the implementation principle, personal feeling native JS in addition to the large amount of code, with or very flexible, you can try to try to encapsulate the method you want to use.

Any mistakes are welcome, correct them, thank you ~@^_^@~