JavaScript编写简单的增加与减少元素
程序员文章站
2022-06-24 15:20:30
1 2 3 4 5 6 7 8 Document 9 10 11 12 13 14 第1个li 15 16 17 第2个li 18 19 20 第3个li ... ......
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
25 <a href="">第4个li</a>
26 </li>
27 </ul>
28 <input type="button" value="点击增加第一个">
29 <input id="dier" type="button" value="点击减少第一个">
30 <input id="disan" type="button" value="点击增加最后一个">
31 <input id="disi" type="button" value="点击减少最后一个">
32 <script>
33 let i = 0;
34 let j = 0;
35 let ul = document.querySelector('ul');//找到ul
36 let input = document.querySelector('input');//找到第一个input
37 input.onclick = function () {
38 let first = ul.firstElementChild;//将元素第一个子节点存入first中
39 let n = document.createElement('li');//创建元素li
40 ul.insertBefore(n, first);//将创建的元素li放入ul中
41 i++;
42 n.innerHTML = `<a href="#">增加第${i}个li</a>`;
43 }
44 let dier = document.querySelector('#dier');//找到第二个input
45 dier.onclick = function () {
46 let first = ul.firstElementChild;
47 let n = document.createElement('li');
48 ul.removeChild(first);//删除节点
49 i--;
50 n.innerHTML = `<a href="#">减少第${i}个li</a>`;
51 }
52 let disan = document.querySelector('#disan');//找到第三个input
53 disan.onclick = function () {
54 let n1 = document.createElement('li');
55 ul.appendChild(n1);
56 j++;
57 n1.innerHTML = `<a href="#">增加最后第${j}个li</a>`;
58 }
59 let disi = document.querySelector('#disi');//找到第四个input
60 disi.onclick = function () {
61 let last = ul.lastElementChild;
62 let n = document.createElement('li');
63 ul.removeChild(last);//删除节点
64 j--;
65 n.innerHTML = `<a href="#">增加第${i}个li</a>`;
66 }
67 </script>
68 </body>
69
70 </html>