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>
