創建、插入和刪除元素 · JavaScript學習記錄

### 創建、插入和刪除元素 - 創建 DOM 元素 - `document.createElement(標簽名)` 創建一個節點，不渲染 - `父級.appendChild(節點)` **刪除原有子節點**，再添加子節點，并渲染 - 例子：為 `ul` 插入 `li` - 插入元素 - `父級.insertBefore(節點, 原有節點)` 在已有元素前插入 - 例子：倒敘插入 `li` - 刪除 DOM 元素 - `父級.removeChild(節點)` 刪除一個節點 - 例子：刪除 `li` - 代碼： ```HTML <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> <title>DOM創建插入刪除元素</title> <script> window.onload = function () { // 封裝getElementById function get(id) { return document.getElementById(id); }; // 在 ul 下增加 li let oUl = get('u1'); get('btn1').onclick = function () { let oLi = document.createElement('li'); let sL = get('txt1').value + "<a href='javascript:;'>刪除</a>"; oLi.innerHTML = sL; oUl.appendChild(oLi); aRemove(); }; // 從 ul 下插入 li get('btn2').onclick = function () { let oLi = document.createElement('li'); let aLi = document.getElementsByTagName('li'); let sL = get('txt1').value + "<a href='javascript:;'>刪除</a>"; let i = get('txt2').value - 1; oLi.innerHTML = sL; if (aLi.length > i && aLi.length > 0) { oUl.insertBefore(oLi, aLi[i]); } else { oUl.appendChild(oLi); } aRemove(); }; // 從 ul 下刪除 li get('btn3').onclick = function () { let aLi = document.getElementsByTagName('li'); let i = get('txt2').value - 1; if (i < aLi.length && i >= 0) { oUl.removeChild(aLi[i]); } else { alert('找不到第'+ (parseInt(i) + 1) +'個li'); } }; // this 從 ul 刪除 li function aRemove() { let aA = document.getElementsByTagName('a'); let i =0 for (i = 0; i < aA.length; i++) { aA[i].onclick = function () { oUl.removeChild(this.parentNode); } } } } </script> </head> <body> <input type="text" name="" id="txt1" value="123"> <input type="button" name="" id="btn1" value="增加"> <input type="text" name="" id="txt2" value="1"> <input type="button" name="" id="btn2" value="插入"> <input type="button" name="" id="btn3" value="刪除"> <div is="d1"> <ul id="u1"> </ul> </div> </body> </html> ```