<!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. MyBatis基本配置和实践(一)

    第一步:创建Java工程和数据库表user 第二步:使用Maven管理项目依赖 第三步:在resources目录下加入log4j.properties 第四步:在resources目录下加入SqlMa ...

  2. 如何使用chrome devtool调试Mobile网页？

    凡是做过mobile网页web app开发的朋友一定对开发效率的底下会有吐槽.现在chrome dev tool改变了程序员们的苦比. 0.登录google chrome 1. chrome://in ...

  3. yum 安装LAMP

    一.安装 MySQL 首先来进行 MySQL 的安装.打开超级终端,输入: [root@localhost ~]# yum install mysql mysql-server 安装完毕,让 MySQ ...

  4. 剑指offer相关问题

    1. 变态跳台阶 Fib(n) = Fib(n-1)+Fib(n-2)+Fib(n-3)+..........+Fib(n-n)         =Fib(0)+Fib(1)+Fib(2)+..... ...

  5. String str = "1,2,3,4,5,6" 如何将这个字符串转换成int数组

    String str = "1,2,3,4,5,6"; string[] strS = str.Split(','); int[] num = new int[strS.Lengt ...

  6. Javascript 中 true 和 false

    "" == false // true "0" == false // true "" == "0" //false 以 ...

  7. 创建 In-app Billing 商品

    创建可供购买的 In-app Billing 商品 在你发布 In-app Billing 应用前,你需要在 Google Play 开发者控制台 定义可供购买的数字商品列表. 在 Google Pl ...

  8. 【Python学习】Python中的数据类型精度问题

    Python真的很神奇...神奇到没有直接的数据类型概念,并且精度可以是任意精度.想当初,第一次接触OI算法时,写得第一个算法就是高精度加法,捣鼓了半天.一切在Python看来,仅仅三行代码即可完成. ...

  9. 25个最佳的SSH命令

    参考文献地址(SSH原理与运用(一):远程登录): http://www.ruanyifeng.com/blog/2011/12/ssh_remote_login.html 参考文献地址(SSH原理与 ...

  10. DNS配置范例

    这里使用CentOS 7作为DNS主服务器.(ip:172.18.7.77) 正向解析配置: ]# vim /etc/named.rfc1912.zones zone "opsnote.co ...