<!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <meta name="viewport" content="width=device-width, initial-scale=1.0">

     <meta http-equiv="X-UA-Compatible" content="ie=edge">

     <title>Document</title>

 </head>

 <body>

     <ul>

         <li class="diyi">

             <a href="">第1个li</a>

         </li>

         <li>

             <a href="">第2个li</a>

         </li>

         <li>

             <a href="">第3个li</a>

         </li>

         <li>

             <a href="">第4个li</a>

         </li>

     </ul>

     <input type="button" value="点击增加第一个">

     <input id="dier" type="button" value="点击减少第一个">

     <input id="disan" type="button" value="点击增加最后一个">

     <input id="disi" type="button" value="点击减少最后一个">

     <script>

         let i = 0;

         let j = 0;

         let ul = document.querySelector('ul');//找到ul

         let input = document.querySelector('input');//找到第一个input

         input.onclick = function () {

             let first = ul.firstElementChild;//将元素第一个子节点存入first中

             let n = document.createElement('li');//创建元素li

             ul.insertBefore(n, first);//将创建的元素li放入ul中

             i++;

             n.innerHTML = `<a href="#">增加第${i}个li</a>`;

         }

         let dier = document.querySelector('#dier');//找到第二个input

         dier.onclick = function () {

             let first = ul.firstElementChild;

             let n = document.createElement('li');

             ul.removeChild(first);//删除节点

             i--;

             n.innerHTML = `<a href="#">减少第${i}个li</a>`;

         }

         let disan = document.querySelector('#disan');//找到第三个input

         disan.onclick = function () {

             let n1 = document.createElement('li');

             ul.appendChild(n1);

             j++;

             n1.innerHTML = `<a href="#">增加最后第${j}个li</a>`;

         }

         let disi = document.querySelector('#disi');//找到第四个input

         disi.onclick = function () {

             let last = ul.lastElementChild;

             let n = document.createElement('li');

             ul.removeChild(last);//删除节点

             j--;

             n.innerHTML = `<a href="#">增加第${i}个li</a>`;

         }

     </script>

 </body>

 </html>

JavaScript编写简单的增加与减少元素的更多相关文章

  1. HTML 和 JavaScript 编写简单的 404 界面

    编写简单的 404 界面,也可以用来做 500 报错界面,还会飘东西,特别好,蛮漂亮的! <!DOCTYPE html> <html> <head> <met ...

  2. 学习笔记之javascript编写简单计算器

      感觉自己的的实力真的是有待提高,在编写计算器的过程中,出现了各种各样的问题,暴露了自己的基础不扎实,逻辑思维能力不够,学得知识不能运用到自己的demo中区.先介绍一些这个这个计算器的整体思路.大致 ...

  3. JavaScript编写简单的抽奖程序

    1.需求说明 某公司年终抽奖,需要有如下功能 1)可以根据实际情况设置到场人数的最大值 2) 点击“开始”,大屏幕滚动,点击“停止”,获奖者的编号出现在大屏幕上 3)在界面里显示全部奖项获奖人编号 4 ...

  4. 用JavaScript编写简单斗地主效果Es6

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

  5. 用javascript编写简单银行取钱存钱流程（函数）

    const readline = require('readline-sync')//引用readline-sync let arr = [[], []]; //登陆 let add = functi ...

  6. javascript编写一个简单的编译器(理解抽象语法树AST)

    javascript编写一个简单的编译器(理解抽象语法树AST) 编译器 是一种接收一段代码,然后把它转成一些其他一种机制.我们现在来做一个在一张纸上画出一条线,那么我们画出一条线需要定义的条件如下: ...

  7. 利用 jQuery 操作页面元素的方法，实现电商网站购物车页面商品数量的增加和减少操作，要求单项价格和总价随着数量的改变而改变

    查看本章节 查看作业目录 需求说明: 利用 jQuery 操作页面元素的方法,实现电商网站购物车页面商品数量的增加和减少操作,要求单项价格和总价随着数量的改变而改变 当用户单击"+" ...

  8. JavaScript从数组中删除指定值元素的方法

    本文实例讲述了JavaScript从数组中删除指定值元素的方法.分享给大家供大家参考.具体分析如下: 下面的代码使用了两种方式删除数组的元素,第一种定义一个单独的函数,第二种为Array对象定义了一个 ...

  9. three.js是JavaScript编写的WebGL第 三方库

    three.js是JavaScript编写的WebGL第 三方库.提供了非常多的3D显示功能.Three.js 是一款运行在浏览器中的 3D 引擎,你可以用它创建各种三维场景,包括了摄影机.光影.材质 ...

随机推荐

  1. 02:奇数单增序列 个人博客doubleq.win

    个人博客doubleq.win 02:奇数单增序列 查看 提交 统计 提问 总时间限制:  1000ms 内存限制:  65536kB 描述 给定一个长度为N(不大于500)的正整数序列,请将其中的所 ...

  2. css 动画中 ease,seae-in,ease-in-out,ease-out,效果区别

    linear 规定以相同速度开始至结束的过渡效果(等于 cubic-bezier(0,0,1,1)).(匀速) ease 规定慢速开始,然后变快,然后慢速结束的过渡效果(cubic-bezier(0. ...

  3. JS判断浏览器版本

    CSS html,body{ height: 100%; } body{ margin: 0 } div{ padding-left: 50px; } .span{ padding: 5px 15px ...

  4. Mongodb的入门（7）window安装mongodb4

    Mongodb4: MongoDB CTO Eliot Horowitz 刚刚于2月16日凌晨在MongoDB西雅图大会上宣布,MongoDB将在4.0版本中正式推出多文档ACID事务支持 . “Mo ...

  5. VS2010 创建 windows service 程序

    参考网上保护眼睛程序,自写程序如下. 1.创建一个名词为“CareEyeService”,类型为“WindowsService”的应用程序. 自动生成代码如下图: 2.修改ServiceCareEye ...

  6. 利用Java反射实现JavaBean对象相同属性复制并初始化目标对象为空的属性的BeanUtils

    有时遇到将数据传输对象转换成JSON串会将属性值为空的属性去掉,利用Java反射实现JavaBean对象数据传输对象的相同属性复制并初始化数据传输对象属性为空的属性,然后转换成JSON串 packag ...

  7. c# webservice中访问http和https的wsdl，生成的配置节点的不同之处

    http: https:

  8. 最近选购MP3而有感便携追求音质的一些心得

    之前的创新小石头MP3的耳机接口松动了.考虑到它已经服役了4年了.所以我准备重新买一个.而小石头出色的外放,我决定让给宝宝当玩具. 选购心得MP3的时候,原来的主导思想,是在低价位的里面考虑一台国际品 ...

  9. spider-抓取网页内容

    使用urllib2抓取网页内容: import urllib2 from HTMLParser import HTMLParser request = urllib2.Request('http:// ...

  10. Java学习---Java面试基础考核·

    Java中sleep和wait的区别 ① 这两个方法来自不同的类分别是,sleep来自Thread类,和wait来自Object类. sleep是Thread的静态类方法,谁调用的谁去睡觉,即使在a线 ...