<!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. Shell脚本实现自动修改IP地址

    作为一名Linux SA,日常运维中很多地方都会用到脚本,而服务器的ip一般采用静态ip或者MAC绑定,当然后者比较操作起来相对繁琐,而前者我们可以设置主机名.ip信息.网关等配置.修改成特定的主机名 ...

  2. 通过js进行页面跳转的几种方式

    1.<a>标签 <a href="www.baidu.com" title="百度">百度</a> <a href= ...

  3. Quartz使用AutoFac依赖注入问题小结

    theme: channing-cyan highlight: a11y-dark 背景 最近在做一个需求,就是在Job中捕捉异常,然后通过邮件或者消息的方式推送给指定人员,在需求实现的过程中遇到的一 ...

  4. Ribbon——负载均衡

    一.什么是Ribbon Ribbon是Netflix发布的开源项目,主要功能是提供客户端的软件负载均衡算法,将Netflix的中间层服务连接在一起.Ribbon客户端组件提供一系列完善的配置项如连接超 ...

  5. Learning to Sample

    此处主要提出几个疑问和想法: 疑问: 为什么需要这个匹配过程?虽然G可能不是P的子集,但是为什么一定需要他是子集呢? 如果一定要匹配的话,匹配过程是没法反向传播的,所以只可以在推理阶段使用,那么这个推 ...

  6. Qt5读取系统环境变量和获取指定目录下的所有文件夹绝对路径

    头文件 /// 读取环境变量使用 #include <QProcessEnvironment> /// 遍历文件夹使用 #include <QDir> 核心代码 一个例子, 输 ...

  7. java源码——计算大于一个数的最小素数

    根据输入数字,计算大于一个数的最小素数. 话不多说,直接贴码. package com.fuxuemingzhu.countprime.main; import java.util.Scanner; ...

  8. 【LeetCode】279. Perfect Squares 解题报告（C++ & Java）

    作者: 负雪明烛 id: fuxuemingzhu 个人博客: http://fuxuemingzhu.cn/ 目录 题目描述 题目大意 解题方法 四平方和定理 动态规划 日期 题目地址:https: ...

  9. 【LeetCode】611. Valid Triangle Number 解题报告（Python）

    作者: 负雪明烛 id: fuxuemingzhu 个人博客: http://fuxuemingzhu.cn/ 题目地址:https://leetcode.com/problems/valid-tri ...

  10. 在Latex 下写毕业论文

    目录 配置 TeXlive 论文模板 TeXstudio 写作 特殊环境 算法 定理.定义 编译 可能出现的问题 参考文献 缺少volume 学位论文 配置 TeXlive 下载了最新的texlive ...