<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('不能为空')
}
}