简易对话框编译

css

#box1 {
            margin-top: 20px;
            margin-bottom: 5px;
            width: 218px;
            height: 400px;
            border: 1px #000 solid;
        }

        #box1 :nth-of-type(odd) {
            text-align: right;
        }

        #box1 :nth-of-type(even) {
            text-align: left;
        }

html
  <div class="box">
        <div id="box1"></div>
        <input type="text" id="text"><button id="btn3">发送</button>
    </div>

js
    var _box1 = document.getElementById('box1');
    var _text = document.getElementById('text');
    var _btn3 = document.getElementById('btn3');
    _btn3.onclick = function () {
        var A = _text.value;
        if (A === "") {
            alert("输入不能为空");
            return;
        }
        _box1.innerHTML = _box1.innerHTML + "<div>" + A + "</div>";

        text.value = "";
    }

效果