案例：简单版发布和删除留言案例
案例：简单版发布和删除留言案例
发布留言——案例分析：
① 核心思路： 点击按钮之后，就动态创建一个 li，添加到 ul 里面。
② 创建 li 的同时，把文本域里面的值通过 li.innerHTML 赋值给 li 。
③ 如果想要新的留言在后面显示，就用 appendChild ；如果想要在前面显示，就用 insertBefore 。
删除留言——案例分析：
① 当我们把文本域里面的值赋给 li 的时候，多添加一个删除的链接。
② 需要把所有的链接获取过来，当我们点击当前的链接的时候，删除当前链接所在的 li 。
③ 阻止链接跳转需要添加 javascript:void(0); 或者 javascript:;。
代码：
DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>案例：简单版发布和删除留言案例title><style>* {margin: 0;padding: 0;}body {padding: 100px;}textarea {width: 200px;height: 100px;border: 1px solid pink;/* 去掉轮廓线 */outline: none;/* 禁止拖拽文本域 */resize: none;}ul {margin-top: 50px;}li {width: 300px;padding: 5px;background-color: rgb(245, 209, 243);color: #000;font-size: 14px;margin: 15px 0;}li a {float: right;text-decoration: none;}style>
head><body><textarea name="" id="" cols="30" rows="10" placeholder="请输入您的留言">textarea><button>发布button><ul>ul><script>// 1.获取元素var btn = document.querySelector('button');var text = document.querySelector('textarea');var ul = document.querySelector('ul');// 2.注册事件btn.onclick = function () {if (text.value.trim() === '') {alert('您没有输入内容');return false;} else {// console.log(text.value);// (1)创建元素var li = document.createElement('li');// 先有li 才能赋值li.innerHTML = text.value + "删除";// (2)添加元素// ul.appendChild(li);ul.insertBefore(li, ul.children[0]);// (3)删除元素 删除的是当前链接的 li 它的父亲var as = document.querySelectorAll('a');for (var i = 0; i < as.length; i++) {as[i].onclick = function () {// node.removeChild(child); 删除的是li 当前a所在的 li this.parentNode;ul.removeChild(this.parentNode);}}// 清空留言板text.value = '';}}script>
body>html>
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！