2,js模拟聊天

​/*CSS样式*/
<style>
        .box {
            width: 200px;
            height: 200px;
            border: 1px solid black;
            background-color: aqua;
        }
</style>

​

<!-- 页面结构-->

<div id="box"></div>
    宝贝: <input type="text"> <button>发送</button>

//js代码段
<script>
        // <!-- 先获取元素 -->
        var box = document.querySelector("div");
        var inp = document.querySelector('input');
        var btn = document.querySelector('button');
        // input中输入的内容都在box中显示
        btn.onclick = function () {
            var content = inp.value;
            box.innerHTML += "宝贝 : " + content + "<br>";
            // 清空文本框内的内容
            inp.value = '';
        }
</script>