JavaScript编写简单的增加与减少元素

 <!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编写简单的增加与减少元素

最新文章

热门文章
