<!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. Can a C++ class have an object of self type?

    A class declaration can contain static object of self type,it can also have pointer to self type,but ...

  2. 【C/C++】算法入门：排序/算法笔记

    (设排序从小到大) 冒泡排序 这个大家都会,从第一个开始往后俩俩交换,然后第二个,最后到最后一个,复杂度n^2 选择排序 思路和冒泡差不多,比如要得到从小到大的排序,就是从第一个开始,i取1~n,每次 ...

  3. 粒子群算法-PSO

    粒子群优化算法 1. 背景知识 1995年美国社会心理学家Kennedy和电气工程师Eberhart共同提出粒子群优化算法(Particle Swarm Optimization, PSO).PSO算 ...

  4. 象群游牧算法--EHO

    象群游牧算法的数学模型 象群的游牧行为非常复杂,但是其中一些行为可以帮助我们寻找全局最优解和局部最优解.对此,进行数学建模为: (1) 象群的每个部落都有固定数目的大象: (2) 每次迭代中,部落中都 ...

  5. 建立资源的方法（Project）

    <Project2016 企业项目管理实践>张会斌 董方好 编著 终于,进入第5章资源计划编制了,所以就不能还在任务工作表里厮混了是吧,那就先进入资源工作表吧:[任务]>[甘特图]& ...

  6. Linux下编译生成SO并进行调用执行

    Linux下编译生成SO并进行调用执行 参考博客的博客: C编译: 动态连接库 (.so文件) - Vamei - 博客园 (cnblogs.com) C 多个动态库存在同名函数问题处理方法:-fvi ...

  7. CF803B Distances to Zero 题解

    Content 有一个长度为 \(n\) 的序列 \(a_1,a_2,a_3,...,a_n\),求每个数与它最近的 \(0\) 的距离(\(0\) 的距离为 \(0\)). 数据范围:\(1\leq ...

  8. SpringBoot项目给静态变量static注入@Value

    @value不能直接注入值给静态属性,spring 不允许/不支持把值注入到静态变量中:spring支持set方法注入,我们可以利用非静态setter 方法注入静态变量 @Component publ ...

  9. JAVA获取当前日期指定月份后(多少个月后)的日期

    环境要求:使用jdk1.8 package com.date; import java.text.ParseException; import java.text.SimpleDateFormat; ...

  10. UDP&串口调试助手用法（3）

    发送参数配置 下面以 UDP 通道为例介绍 发送数据配置 概览 选择数据源 文件: 选择发送的文件 源码: 自己手动键入发送数据,默认输入的为16进制数据, 定时器发送周期 单位为毫秒. 发送帧计数 ...