<!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. iOS中基于WebView的HTML网页离线访问技术的实现

    其实就是MVC模式,视图在在线.离线时可以共用,控制器在在线时是由服务器端实现的,而离线时则是由本地Obj-C代码实现.具体实现方式为采用Mongoose实现. 代码为: mongoose.h mon ...

  2. Rxjava学习(一基础篇)

    一.Rxjava跟EventBus的区别 RxJava 是一个响应式编程框架,通过一种扩展的观察者设计模式来实现异步操作. 跟AsyncTask和Handler类似,但是比AsyncTask和Hand ...

  3. 应用程序 调用 webservice

    首先用VS创建一个WebService服务工程,并且完成基本功能,本人完成的是html转pdf功能. 然后,新建一个Windows应用程序. 添加WebService到Windows项目中,如图 然后 ...

  4. 近期关于CI/CD策略以及git分支模型的思考

    近两个月由于个人处于新环境.新项目的适应阶段,没怎么提笔写些文章.中间有好几个想法想记录下来分享,但受限于没有很好的时间段供自己总结思考(也可以总结为间歇性懒癌和剧癌发作),便啥也没有更新.借这个周末 ...

  5. Attribute+Reflection，提高代码重用

    这篇文章两个目的,一是开阔设计的思路,二是实例代码可以拿来就用. 设计的思路来源于<Effective c#>第一版Item 24: 优先使用声明式编程而不是命令式编程.特别的地方是,希望 ...

  6. 微软在WPC 2015中为“伙伴们”带来了什么？

    在微软 WPC 2015(微软全球合作伙伴大会)上,微软全球渠道总监 Phil Sorgen 指出,微软总营收的 92% 来自合作伙伴.这句话验证了微软与合作伙伴间日益紧密的合作关系,也点出了本次大会 ...

  7. BufferedInputStream使用详解

    下面的例子演示如何使用BufferedInputStream类读取文本文件内容. 首先需要声明一个byte数组作为buffer,然后循环将文本内容循环读入到buffer中,并将buffer转换为字符串 ...

  8. 如何让4年前的电脑装win10开机跑进15秒

    我是用我的电脑测试的.看看我电脑的配置 我的是windows10,机械硬盘. 在这里要说的是给电脑优化,让其开机更快.当然,因电脑配置而异,我的最快是11秒.标题可能有点夸张了,结果因电脑配置而异,高 ...

  9. JAVA中正则表达式学习总结

    一.JAVA中正则表达式相关的类 1. java.util.regex.Pattern 该类用于编译模式,模式可以理解为一个正则表达式,比如:a*b. 用法如下: // 创建模式 Pattern p ...

  10. [WebKit] JavaScriptCore解析--基础篇 (一)JSC与WebCore

    先看一下官方的基本介绍,短短几句就塞满了关键字. SquirrelFish,正式名称是JavaScriptCore,包括register-based(基于寄存器的虚拟机), direct-thread ...