添加列表js

<style>

        .container {

            width: 400px;

            margin: 0 auto;

        }

        p{

            text-align: center;

        }

    </style>

<div class="container">

        <p>不能添加空的文本</p>

        <div class="input">

            <input type="text">

            <button>添加</button>

        </div>

        <ul class="list">

            <li>项目1</li>

            <li>项目2</li>

        </ul>

    </div>

var ul = document.getElementsByTagName('ul')[0];

        var btn = document.getElementsByTagName('button')[0];

        var ipt = document.getElementsByTagName('input')[0];

        btn.onclick = function () {

            //判断文本是否为空

            if (ipt.value) {

                var li = document.createElement('li');

                li.innerHTML = ipt.value;

                ul.appendChild(li);

                ipt.value = null

            } else if (!ipt.value) {

                alert('不能为空')

            }

        }