<!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. 【Python】matplotlib直方图纵轴显示百分比

    其实很简单,就是算了一下百分比权重,乘以了一个权重值 import matplotlib.pyplot as plt from matplotlib.ticker import FuncFormatt ...

  2. 详解 Java I/O 与装饰者模式

    1.I/O分类与装饰者模式 基本java I/O包含两种类型的流,字节流(inputStream.outputStream)与字符流(Writer,Reader),关于I/O操作类的设计,用到了装饰者 ...

  3. Android 内存泄漏检测工具 LeakCanary（Kotlin版）的实现原理

    LeakCanary 是一个简单方便的内存泄漏检测框架,做 android 的同学基本都收到过 LeakCanary 检测出来的内存泄漏.目前 LeakCanary 最新版本为 2.7 版本,并且采用 ...

  4. centos7部署二进制mysql-5.6

    目录 一.环境声明 二.程序部署 一.环境声明 [mysql-Server] 主机名 = host-1 系统 = centos-7.3 地址 = 1.1.1.1 软件 = mysql-5.6.39 3 ...

  5. Oracle命名规则

    1.长度不能超过三十个字符 2. 不要使用Oracle关键字 比如:id  name  table 3. 不能使用数字开头 包含:数字  字母  下划线 美元符号 4.  建议用 英文单词,不要去用中 ...

  6. C语言程序设计：模拟简单运算器的工作

    目录 C语言程序设计:模拟简单运算器的工作 1.题目 2.分析 3.代码实现 4.结尾 C语言程序设计:模拟简单运算器的工作 1.题目 ​ 模拟简单运算器的工作,输入一个算式(没有空格),遇等号&qu ...

  7. matplotlib模块详解

    简单绘图,折线图,并保存为图片 import matplotlib.pyplot as plt x=[1,2,3,4,5] y=[10,5,15,10,20] plt.plot(x,y,'ro-',c ...

  8. CF507A Amr and Music 题解

    Content 有一个容量为 \(k\) 的背包.有 \(n\) 个物品,第 \(i\) 个物品的体积为 \(c_i\).请求出背包最多能够装下的物品的个数,并输出任意一个方案. 数据范围:\(1\l ...

  9. mongodb 连接方式之mongo-shell

    单机连接:mongo 120.131.0.64:27017 -u root -p KingSoft@1314 --authenticationDatabase admin 字符串连接 python i ...

  10. 快速上手FastJSON

    前言 作为一名后端开发而言肯定会接触数据,把数据提供给前端或者把数据存储起来,目前比较火热的传输格式是json,给前端传json是再常见不过啦,甚至是往db里面直接存入json. 在java层面来说j ...