JS实现简易留言板(节点操作)


Posted in Javascript onMarch 16, 2020

本文实例为大家分享了JS实现简易留言板的具体代码,供大家参考,具体内容如下

今天的案例主要是对节点进行操作

创建节点、添加节点、删除节点以及为节点添加内容的操作。 

就是一个简单的留言板功能,可以发布留言,删除留言。

主要思路:两个鼠标点击事件——点击发布按钮事件和点击删除按钮事件

发布按钮事件:首先在文档中创建li节点。然后第二步,先把文本域中的内容获取出来赋给li,这里要注意,文本域是表单元素,获取表单元素的内容是使用表单的特有属性value,要与普通元素获取内容的innerHTML进行区分;再把删除链接添加到li中,利用字符串拼接的方式。最后把li节点添加到ul中,添加的方式有两种,是直接添加到ul列表项的末尾,也可以添加到指定位置。这里我是选中插入到ul列表的最前面。

删除按钮事件:点击删除按钮的事件是在把创建的li添加到ul中之后定义的。删除的操作主要是要弄清除是父节点元素删除子节点元素。在这里点击删除链接,删除的是当前被点击的按钮所在的li。li是删除连接的父节点元素。

分析永远比敲代码重要。要先分析,再去敲代码,实现需求。

先看效果图吧

默认是没有任何内容的

JS实现简易留言板(节点操作)

在文本域中输入,点击发布,可以发布留言,如果发完想删除,可以点击里面的删除按钮,删除留言

JS实现简易留言板(节点操作)

JS实现简易留言板(节点操作)

删除操作后: 

JS实现简易留言板(节点操作)

JS代码:

<script>
  // 点击发布,会把文本域中的内容发布到ul中
  // 点击删除,会删除留言
  // 1.获取事件源 文本域 按钮 文本域
  var text = document.querySelector('textarea');
  var btn = document.querySelector('button');
  var ul = document.querySelector('ul');
  // 2.注册点击事件
  btn.onclick = function () {
   // 首先会创建一个li 并把文本域的内容给li 再把li添加到ul中
   var li = document.createElement('li');
   if (text.value == '') {
    alert('您没有输入内容')
   } else {
    // 文本域的值 value
    // 增加一个删除留言的按钮
    li.innerHTML = text.value + '<a href="javascript:;" rel="external nofollow" rel="external nofollow" >删除</a>';
    ul.insertBefore(li, ul.children[0]); // 把最新的发布放到最前面
    // ul.appendChild(li);
 
    // 3.注册删除点击事件
    var removeBtn = document.querySelectorAll('a');
    for (var i = 0; i < removeBtn.length; i++) {
     removeBtn[i].onclick = function () {
      ul.removeChild(this.parentNode);
     }
    }
   }
  }
</script>

全部代码:

<!DOCTYPE html>
<html lang="en">
 
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <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: red;
   font-size: 14px;
   margin: 15px 0;
  }
 
  li a {
   float: right;
  }
 </style>
</head>
 
<body>
 <textarea name="" id=""></textarea>
 <button>发布</button>
 <ul>
 
 </ul>
 <script>
  // 点击发布,会把文本域中的内容发布到ul中
  // 点击删除,会删除留言
  // 1.获取事件源 文本域 按钮 文本域
  var text = document.querySelector('textarea');
  var btn = document.querySelector('button');
  var ul = document.querySelector('ul');
  // 2.注册点击事件
  btn.onclick = function () {
   // 首先会创建一个li 并把文本域的内容给li 再把li添加到ul中
   var li = document.createElement('li');
   if (text.value == '') {
    alert('您没有输入内容')
   } else {
    // 文本域的值 value
    // 增加一个删除留言的按钮
    li.innerHTML = text.value + '<a href="javascript:;" rel="external nofollow" rel="external nofollow" >删除</a>';
    ul.insertBefore(li, ul.children[0]); // 把最新的发布放到最前面
    // ul.appendChild(li);
 
    // 3.注册删除点击事件
    var removeBtn = document.querySelectorAll('a');
    for (var i = 0; i < removeBtn.length; i++) {
     removeBtn[i].onclick = function () {
      ul.removeChild(this.parentNode);
     }
    }
   }
  }
 </script>
</body>
 
</html>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
web的各种前端打印方法之jquery打印插件jqprint实现网页打印
Jan 09 Javascript
jQuery 删除/替换DOM元素的几种方式
May 20 Javascript
jQuery实现Twitter的自动文字补齐特效
Nov 28 Javascript
JQuery实现的按钮倒计时效果
Dec 23 Javascript
JS面试题---关于算法台阶的问题
Jul 26 Javascript
Vue.js父与子组件之间传参示例
Feb 28 Javascript
javaScript和jQuery自动加载简单代码实现方法
Nov 24 jQuery
解决使用Vue.js显示数据的时,页面闪现原始代码的问题
Feb 11 Javascript
JQuery选中select组件被选中的值方法
Mar 08 jQuery
vue项目关闭eslint校验
Mar 21 Javascript
jQuery UI实现动画效果代码分享
Aug 19 jQuery
JavaScript实现网页动态生成表格
Nov 25 Javascript
JavaScript实现旋转木马轮播图
Mar 16 #Javascript
基于JavaScript实现贪吃蛇游戏
Mar 16 #Javascript
原生js实现的金山打字小游戏(实例代码详解)
Mar 16 #Javascript
JavaScript实现拖拽效果
Mar 16 #Javascript
js实现点赞效果
Mar 16 #Javascript
Javascript Web Worker使用过程解析
Mar 16 #Javascript
Javascript ParentNode和ChildNode接口原理解析
Mar 16 #Javascript
You might like
PHP中include与require使用方法区别详解
2013/10/19 PHP
采用thinkphp自带方法生成静态html文件详解
2014/06/13 PHP
php基于双向循环队列实现历史记录的前进后退等功能
2015/08/08 PHP
php商品对比功能代码分享
2015/09/24 PHP
php获取服务器操作系统相关信息的方法
2016/10/08 PHP
实例讲解PHP验证邮箱是否合格
2019/01/28 PHP
JS 图片缩放效果代码
2010/06/09 Javascript
自己动手开发jQuery插件教程
2011/08/25 Javascript
什么是 AngularJS?AngularJS简介
2014/12/06 Javascript
jquery实现可自动判断位置的弹出层效果代码
2015/10/12 Javascript
基于canvas实现的钟摆效果完整实例
2016/01/26 Javascript
Angular.js回顾ng-app和ng-model使用技巧
2016/04/26 Javascript
自己封装的一个原生JS拖动方法(推荐)
2016/11/22 Javascript
Jquery与Bootstrap实现后台管理页面增删改查功能示例
2017/01/22 Javascript
JavaScript解析JSON格式数据的方法示例
2017/01/24 Javascript
Angular2实现自定义双向绑定属性
2017/03/22 Javascript
详解webpack中的hash、chunkhash、contenthash区别
2018/01/05 Javascript
jQuery实现标签子元素的添加和赋值方法
2018/02/24 jQuery
vscode下的vue文件格式化问题
2018/11/28 Javascript
解决vue+router路由跳转不起作用的一项原因
2020/07/19 Javascript
vue 弹出遮罩层样式实例
2020/07/22 Javascript
Python 学习教程之networkx
2019/04/15 Python
Python获取时间范围内日期列表和周列表的函数
2019/08/05 Python
新西兰最大的品牌运动鞋购物网站:Platypus NZ
2017/10/27 全球购物
阿迪达斯荷兰官方网站:adidas荷兰
2018/03/16 全球购物
英国卫浴商店:Ergonomic Design
2019/09/22 全球购物
size?荷兰官方网站:英国高级运动鞋精品店
2020/07/24 全球购物
金讯Java笔试题目
2013/06/18 面试题
二年级小学生评语
2014/04/21 职场文书
公关活动策划方案
2014/05/25 职场文书
作风建设年活动实施方案
2014/10/24 职场文书
八月迷情观后感
2015/06/11 职场文书
2016年校园重阳节广播稿
2015/12/18 职场文书
元素水平垂直居中的方式
2021/03/31 HTML / CSS
Java Socket实现Redis客户端的详细说明
2021/05/26 Redis
「玫瑰之王的葬礼」舞台剧主视觉图公开
2022/03/21 日漫