JavaScript实现待办事项
- 2020 年 2 月 13 日
- 筆記
思路分析
- 按钮绑定一个点击事件
- 获取用户输入的内容
- 创建li元素,把用户输入的内容添加到li标签中
- 把创建的li元素添加到无序列表
- 清空输入框
代码实现
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>待办事项</title> </head> <body> <input type="text" id="id_input" /> <input type="button" value="确定" onclick="addItem()" /> <ul id="id_ul"> <li>吃饭</li> <li>睡觉</li> <li>打豆豆</li> </ul> <script type="text/javascript"> //1. 按钮绑定一个点击事件 function addItem() { //2. 获取用户输入的内容 var inputTag = document.getElementById("id_input"); var content = inputTag.value; //3. 创建li元素,把用户输入的内容添加到li标签中 // 新建一个li元素 var liTag = document.createElement("li") // 指定li标签中的内容 liTag.innerHTML = content; //4. 把创建的li元素添加到无序列表 //获取到ul标签 var ulTag = document.getElementById("id_ul") // 把新建的li元素追加到ul之后 ulTag.appendChild(liTag) // 清空输入框 inputTag.value = "" } </script> </body> </html>
效果展示
参考
- 黑马程序员 120天全栈区块链开发 开源教程 https://github.com/itheima1/BlockChain
一番雾语：JavaScript的小实例。
