<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #wrap{
            width: 400px;
            margin: 50px auto;
        }
        #input{
            width: 100%;
            height: 218px;
        }
        #tArea{
            width: 396px;
            height: 180px;
            resize: none;
            font-size: 16px;
        }
        #list{
            margin-top: 30px;
            list-style-type: none;
        }
        #list li{
            font-size: 14px;
            text-indent: 2em;
            line-height: 18px;
            border-bottom: 1px solid #999;
            margin: 10px 0;
        }
    </style>
</head>
<body>
<div id="wrap">
    <div id="input">
        <textarea  id="tArea"></textarea>
        <button id="btn">提交</button>

        <ul id="list">
            <!--<li>111</li>-->
            <!--<li>111</li>-->
        </ul>
    </div>
</div>
<script>
    /*
    * 先写html布局样式
    * js实现效果
    * */

    // 同一个作用域下let的变量名不能相同
    // 对象的.操作添加属性是不需要也不能let的
    // var是可以的
    // let可以用,隔开定义多个变量

    // let oArea = document.getElementById('tArea');
    // let oBtn = document.getElementById('btn');
    // let oList = document.getElementById('list');

    let oArea = document.getElementById('tArea'),
        oBtn = document.getElementById('btn'),
        oList = document.getElementById('list');

    //给btn加点击事件
    oBtn.onclick = function () {
        let val = oArea.value;
        // alert(val)
        let a ='<li>';
            a += val;
            a += '</li>';
        oList.innerHTML += a;

        oArea.value = '';
    }

</script>
</body>
</html>