1.  <!DOCTYPE html>
  2.  <html lang="en">
  3.  
  4.  <head>
  5.      <meta charset="UTF-8">
  6.      <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.      <meta http-equiv="X-UA-Compatible" content="ie=edge">
  8.      <title>Document</title>
  9.  </head>
  10.  
  11.  <body>
  12.      <ul>
  13.          <li class="diyi">
  14.              <a href="">第1个li</a>
  15.          </li>
  16.          <li>
  17.              <a href="">第2个li</a>
  18.          </li>
  19.          <li>
  20.              <a href="">第3个li</a>
  21.          </li>
  22.          <li>
  23.  
  24.              <a href="">第4个li</a>
  25.          </li>
  26.      </ul>
  27.      <input type="button" value="点击增加第一个">
  28.      <input id="dier" type="button" value="点击减少第一个">
  29.      <input id="disan" type="button" value="点击增加最后一个">
  30.      <input id="disi" type="button" value="点击减少最后一个">
  31.      <script>
  32.          let i = 0;
  33.          let j = 0;
  34.          let ul = document.querySelector('ul');//找到ul
  35.          let input = document.querySelector('input');//找到第一个input
  36.          input.onclick = function () {
  37.              let first = ul.firstElementChild;//将元素第一个子节点存入first中
  38.              let n = document.createElement('li');//创建元素li
  39.              ul.insertBefore(n, first);//将创建的元素li放入ul中
  40.              i++;
  41.              n.innerHTML = `<a href="#">增加第${i}个li</a>`;
  42.          }
  43.          let dier = document.querySelector('#dier');//找到第二个input
  44.          dier.onclick = function () {
  45.              let first = ul.firstElementChild;
  46.              let n = document.createElement('li');
  47.              ul.removeChild(first);//删除节点
  48.              i--;
  49.              n.innerHTML = `<a href="#">减少第${i}个li</a>`;
  50.          }
  51.          let disan = document.querySelector('#disan');//找到第三个input
  52.          disan.onclick = function () {
  53.              let n1 = document.createElement('li');
  54.              ul.appendChild(n1);
  55.              j++;
  56.              n1.innerHTML = `<a href="#">增加最后第${j}个li</a>`;
  57.          }
  58.          let disi = document.querySelector('#disi');//找到第四个input
  59.          disi.onclick = function () {
  60.              let last = ul.lastElementChild;
  61.              let n = document.createElement('li');
  62.              ul.removeChild(last);//删除节点
  63.              j--;
  64.              n.innerHTML = `<a href="#">增加第${i}个li</a>`;
  65.          }
  66.      </script>
  67.  </body>
  68.  
  69.  </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. 理解webpack4.splitChunks之其余要点

    splitChunks除了之前文章提到的规则外,还有一些要点或是叫疑惑因为没有找到官方文档的明确说明,所以是通过我自己测试总结出来的,只代表我自己的测试结果,不一定正确. splitChunks.ca ...

  2. Laravel基本使用

    laravel一.简介二.运行环境要求 1.php 版本>=5.5.9 2.Mcrypt PHP扩展 php的加密扩展,提供多种加密算法 3.openssl扩展 对传输的数据进行加密 4.mbs ...

  3. less教程

    平时在工作中,偶尔会遇到老大让你修改原来写好的样式,如果修改的多的话,修改起来是非常麻烦的.他不像js一样,定义变量.函数,需要修改某些值,直接修改方法就行了.less的出现,恰恰帮我们解决了这个问题 ...

  4. 浏览器根对象window之值为数值的属性

    1. number属性 1.1 length length 属性返回在当前窗口中frames的数量(包括IFRAMES). 该属性值与window.frames.length属性值相等. 1.2 in ...

  5. AngularJS开发人员最常犯的10个错误

    简介AngularJS是目前最为活跃的Javascript框架之一,AngularJS的目标之一是简化开发过程,这使得AngularJS非常善于构建小型app原型,但AngularJS对于全功能的客户 ...

  6. Monitorix：一款面向Linux的轻型系统和网络监测工具

    Monitorix是一款功能非常强大的免费开源轻型工具,目的在于监测Linux中的系统和网络资源.它可以定期收集系统和网络数据,并使用自己的Web界面,通过图形显示相关信息.Monitorix让用户可 ...

  7. Android Editable

    在android的sdk中有讲,“This is the interface for text whose content and markup can be changed (as opposed ...

  8. 什么是TTL值?(简单明了的解释)

    什么是TTL值? TTL值全称是“生存时间(Time To Live)”,简单的说它表示DNS记录在DNS服务器上的缓存时间. 要理解TTL值,请先看下面的一个例子:假设,有这样一个域名myhost. ...

  9. 期初付年金（annuity-due）

    含义:在 n 个时期,每个时期初付款1元. ——期初付年金的现值因子 ——期初付年金的积累值因子 关系: 二.期初付年金和期末付年金的关系

  10. Git Hub 使用手册参考

    参考信息 1.http://www.liaoxuefeng.com/wiki/0013739516305929606dd18361248578c67b8067c8c017b0002.http://ww ...