js-基础(四)dom实战——留言板
16lz
2022-04-27
<body>
<input type="text" onkeydown="addMsg(this)" placeholder="请输入内容2" autofocus />
<ul class="list"></ul>
<script>
function addMsg(ele){
if(event.key === 'Enter'){
// 1.获取显示留言的容器
const ul = document.querySelector('.list');
// 2.判断用户留言是否为空
if(ele.value.trim().length === 0 ){
alert('请输入');
ele.focus();
return false;
}
// 3.添加一条新留言
const li = document.createElement('li');
li.innerHTML = ele.value + '<button onclick = "del(this.parentNode)">删除</button>';
ul.insertAdjacentElement('afterBegin',li);
// 4.将输入框中的前一条留言清空
ele.value=null;
// 5.焦点重置
ele.focus();
}
}
function del(ele){
return confirm('是否删除?') ? ele.remove() : false;
}
</script>
</body>
更多相关文章
- 如何有效的清除Android中无用的资源(静态代码分析)
- android 添加和删除快捷方式
- Mac端完全删除Android(安卓)Studio
- 七情论坛留言板!
- android 根据Bitmap bitmap 保存图片到手机上
- android之Notification的使用
- Android创建和删除桌面快捷方式
- 任务栏一键删除 Recent APP
- android一键清除最近应用按钮