<!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. mustache 模板，用于构造html页面内容

    Mustache 的模板语法很简单,就那么几个: {{data}} {{#data}} {{/data}} {{^data}} {{/data}} {{.}} {{<partials}} {{{ ...

  2. 阿里,百度,腾讯招聘 Java 程序员的技术标准

    阿里巴巴篇 扎实的计算机专业基础,包括算法和数据结构,操作系统,计算机网络,计算机体系结构,数据库等 具有扎实的Java编程基础,理解IO.多线程等基础框架 熟练使用Linux系统的常用命令及shel ...

  3. C# 串口

    /// <summary>        /// 串口初始化         /// </summary>        private void OpenSerialPort ...

  4. Python交互式编辑器ipthon notebook jupyter

    简介 IPython NoteBook(jupyter)是一个综合的交互式编程环境,比原本python命令进入的交互式环境要强大很多,总之就是炫酷加实用,浏览器中写Python代码,访问源端linux ...

  5. yum 安装LAMP

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

  6. C#调用C++函数

    一.新建C++项目 1.在VS2012中新建->项目->模版->其他语言->Win32->Win32项目->下一步->选DLL,导出符号. 2.在XX.h项目 ...

  7. 关于cocostudio动态添加控件触摸响应无效的学习

    time:2015/04/19 1. 描述 * 把studio制作的ui加载之后,动态添加事件(比如说,单点触摸),结果回调函数(eg:onTouchBegan等)根本没有响应! * 另外,网上有朋友 ...

  8. 【运维】linux命令查看端口占用情况，杀死进程，后台启动进程

    1.查看端口占用情况:> lsof -i:port COMMAND    PID    USER    FD    TYPE   DEVICE    SIZE/OFF    NODE  NAME ...

  9. MFC连接Mysql数据库执行查询和插入

    配置环境: include:mysql.h文件 lib:libmysql.lib文件 dll::libmysql.dll文件 连接代码: MYSQL m_sqlCon; MYSQL_RES *m_re ...

  10. Linux kill/pkill/killall命令详解

    kill kill(terminate a process)命令用来终止指定的进程, 对于一个后台进程就须用kill命令来终止,我们就需要先使用ps/pidof/pstree/top等工具获取进程PI ...