关键思路：
使用 Insertadjacenthtml Api 直接添加到 Ul标签的后面即可
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>todoList：留言板</title></head><body><inputtype="text"onkeydown="insertComment(this)"placeholder="请输入留言"autofocus/><ul class="list"></ul><script>const insertComment = function (ele) {// console.log(ele)//任何事件方法中，都有一个事件对象可以直接使用//event//console.log(event.key)//获取输入按键if (event.key === 'Enter') {//1.判断非空if (ele.value.length === 0) {alert('留言不能为空');//重置焦点ele.focus();//直接返回return false;}//2.添加元素// console.log(ele.value);// //创建一个新元素来保存留言// const li = document.createElement('li');// li.append(ele.value);// ul = document.querySelector('.list');// if(ul.firstElementChild != null){// //将留言插入到第一条之前，确保最新留言在最上面// ul.firstElementChild.before(li);// } else {// ul.append(li);// }//使用 insertAdjacentHTML API 直接添加到 ul标签的后面即可const ul = document.querySelector('.list');ele.value += `<button onclick="del(this.parentNode)">删除</botton>`ul.insertAdjacentHTML('afterbegin', `<li>${ele.value}</li>`);//3.清空输入框ele.value = null;}};const del = function(ele){//alert只有确认按钮//alert('留言将被删除！')//confirm：有确认和取消按钮confirm('是否删除?')? ele.remove : false;//ele.remove();//ele.outerHTML = null //作用同上}</script></body></html>
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
收藏
