<!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>Document</title>
  </head>
  <body>
     <textarea name="" id="" cols="30" rows="10"></textarea>
     <button>提交</button>
     <ul>
 
     </ul>
     <script>
         //获取元素
         var textarea = document.querySelector('textarea');
         var btn   = document.querySelector('button')
         var ul       = document.querySelector('ul')
         //绑定事件
         btn.onclick = function(){
             if (textarea.value === ''){
                 alert('内容不能为空，请入内容')
             }else{
             var li = document.createElement('li');// 创建li元素
             ul.appendChild(li)                    //增加元素节点
             li.innerHTML=textarea.value + "<a href='javascript:;'>删除</a>" ;        //赋值元素内容，并且增加删除按钮 JavaScript:;防止跳转
 
             var as = document.querySelectorAll('a');  // 思路：删除当前元素的父元素，因为它包含了a和li内容，也就是li
             for (var i =0 ;i<as.length;i++){
                 as[i].onclick = function(){
                     //node.removeChild(child); 删除的是li 当前a所在的li this.parentNode
                     ul.removeChild(this.parentNode)
                 }
             }
             }
           
         }
     </script>
 </body>
</html
知识点总结：

1.创建元素节点
var li = document.createElement('li')
2.增加节点 node.appenChild(child) node父级 child是子级 此操作为追加元素
var ul = document.querySelector('ul');
ul.appendChild('li');
3.增加节点 node.insertBefore(child,指定元素)
var lili = document.createElement('li')；
ul.insertBefore(lili,ul.children[0]);
过程：1.创建元素 2.添加元素，指定添加的位置

4.删除节点 node.removeChild(child)
var ul = document.querySelector('ul'); //获取元素
ul.removeChild(ul.children[0]); //删除元素
注意：删除父节点中的某一个子节点

5.复制节点 node.clone.Node()
var ul = docment.querySelect('ul')
//node.cloneNode();括号为空或者里面是false 浅拷贝，只是复制里面的标签，并不复制内容
//如果想深拷贝，也就是连同内容一起拷贝的话，在括号内增加一个true即可 即node.cloneNode(true);
var lis = ul.children[0].cloneNode();//拷贝第一个li的标签
ul.appendChild(lis); //追加一个复制的标签及内容

js 简单版发布留言 案例的更多相关文章

  1. 手机网站下拉加载数据js(简单版)

    加载内容的地方html <div class="bgcolor_f0 clearfix"> <div class="recharge"> ...

  2. web storage 简单的网页留言版

    html <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <ti ...

  3. js简单 图片版时钟，带翻转效果

    js简单 图片版时钟,带翻转效果 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"& ...

  4. Nest.js 6.0.0 正式版发布，基于 TypeScript 的 Node.js 框架

    开发四年只会写业务代码,分布式高并发都不会还做程序员?   Nest.js 6.0.0 正式版发布了.Nest 是构建高效.可扩展的 Node.js Web 应用程序的框架.它使用现代的 JavaSc ...

  5. WordPress版微信小程序3.0版发布

    距离WordPress版微信小程序上一个版本的发布过去了一个月了.在此间,我的工作有些变化,加上正在开发新版本,目前开源版的完善和升级稍稍有些滞后. 虽然这个版本是3.0版,期间有个过渡的2.8版,不 ...

  6. php建立简单的用户留言系统

    php建立简单的用户留言系统 样例 addMsg.php--添加留言页面 doAction.php--响应添加留言页面 . viewMsg.php--显示留言页面 目录结构 addMsg.php--添 ...

  7. 全栈前端入门必看 koa2+mysql+vue+vant 构建简单版移动端博客

    koa2+mysql+vue+vant 构建简单版移动端博客 具体内容展示 开始正文 github地址 <br/> 觉得对你有帮助的话,可以star一下^_^必须安装:<br/> ...

  8. .NET 5.0 RC1 发布，离正式版发布仅剩两个版本

    原文:http://dwz.win/Qf8 作者:Richard 翻译:精致码农-王亮 说明:1. 本译文并不是完全逐句翻译的,存在部分语句我实在不知道如何翻译或组织就根据个人理解用自己的话表述了.2 ...

  9. js下 Day05、DOM案例

    一．简易购物车 效果图: 功能思路分析: 功能一:数量加减 \1. 找到所有的加号按钮,循环绑定点击事件.点击加号时让对应的数量+1 (找清楚加号和数量的关系,让数量标签的内容++) \2. 找到所有 ...

随机推荐

  1. js实现点击不同按钮切换内容

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  2. Mysql资料 mysqldump

    目录 一.简介 备份过程 优缺点 命令使用 myisam引擎 二.安装 配置 日志 三.日常使用 备份全库 备份单个库(带建立库的语句) 备份单个库(不自动建立库) 备份表合集 从全备中恢复单个库 其 ...

  3. 如何优雅的在scrapy中使用selenium —— 在scrapy中实现浏览器池

    1 使用 scrapy 做采集实在是爽,但是遇到网站反爬措施做的比较好的就让人头大了.除了硬着头皮上以外,还可以使用爬虫利器 selenium,selenium 因其良好的模拟能力成为爬虫爱(cai) ...

  4. 小迪安全 Web安全 基础入门 第六天 - 信息打点-Web架构篇&域名&语言&中间件&数据库&系统&源码获取

    一 . Web架构 语言.常用的Web开发语言有PHP,Java,Python,JavaScript,.net等.具体可参考w3school的介绍. 中间件. (1)常见的Web服务器中间件:IIS. ...

  5. Spring 容器的启动过程 流程图 自己看源码的梳理 如有错错误 请指正

  6. CF1445B Elimination 题解

    Content 一个比赛分两场进行,其中: 第一场的第一百名成绩为 \(a\),且第一场的前一百名在第二场中都至少得到了 \(b\) 分. 第二场的第一百名成绩为 \(c\),且第二场的前一百名在第一 ...

  7. 实时&离线皮肤渲染技术（Real-time&Offline Skin Rendering）

    目录 现实皮肤模型 BSSRDF 渲染模型 [2001] Diffusion Profile(扩散剖面)[2001] 偶极子 [2002] 高斯和 [2007] Burley Normalized D ...

  8. 盘点 2021｜「避坑宝典」为大家分享一下笔者在 2021 年所遇到“匪夷所思”的 Bug 趣事（上）

    正版内容:https://xie.infoq.cn/article/3145cd5f525fe26ce9d574c8d 2021尾声想跟大家说的话 虚则实之 引用 https://xie.infoq. ...

  9. libevent源码学习（15）：信号event的处理

    目录信号event处理流程与信号event相关的结构体初始化工作创建一个信号event添加一个信号event信号回调函数信号event的激活       Libevent中的event,主要分为三大类 ...

  10. MySQL设置表中字段的数据唯一性

    mysql设置数据库表里的某个字段的数据是唯一的 ALTER TABLE 表名 ADD unique(`表中的字段`)