js实现简单聊天框效果

描述： 点击发送按钮 将输入框的内容添加到div中 然后清空输入框

  <style>
        div{
            width: 200px;
            height: 200px;
            border: 1px solid green;
        }
    </style>

   <div></div>
    张三：<input type="text"><button>发送</button>

<script>
    //    1、获取元素 div input button
    var div = document.getElementsByTagName('div')[0];
    var inp = document.getElementsByTagName('input')[0];
    var btn = document.getElementsByTagName('button')[0];
    console.log(div,inp,btn);
    // 2、加事件
    btn.onclick = function () {
        // 3.1.1 获取输入框的内容 方法：元素.value
        var txt = inp.value;
        console.log(txt);
        // 3.1 将输入框的内容添加到div 可以使用+=
        div.innerHTML += '迪丽热巴：' + txt + '<br>';
        // 3.2清空输入框的内容 将输入框的值变为空字符或者null
        inp.value = '';
        // inp.value = null;
    }
    </script>
</body>

效果图：