# 1、創建、增加節點 > 方法一：父節點.appendChild(子節點); ``` <ul> <li>林青霞</li> <li>張曼玉</li> <li>劉歡</li> <li>陳冠希</li> </ul> ``` ``` <script> //創建一個 <li>謝霆鋒</li> //創建元素類型的節點 var li = document.createElement('li'); //創建文本類型的節點 var text = document.createTextNode('謝霆鋒'); //添加節點，將文本節點添加到元素節點中 li.appendChild(text); // 得到<li>謝霆鋒</li> //添加節點，將組合好的li，添加到ul中 document.querySelector('ul').appendChild(li); </script> ``` > 方法二：父節點.insertBefore(新節點, 參照的節點); ``` /****************** insertBefore *********************/ //創建一個 <li>渣渣輝</li> var newLi = document.createElement('li'); var newText = document.createTextNode('渣渣輝'); newLi.appendChild(newText); //得到 <li>渣渣輝</li> //找到參照的張曼玉所在的li var zhangmanyu = document.getElementsByTagName('li')[1]; //找到li的父節點 var ul = document.querySelector('ul'); //父節點.insertBefore(新節點, 參照的節點); ul.insertBefore(newLi, zhangmanyu); ``` # 2、克隆節點 > 語法：原來的節點.cloneNode([true]); ``` <ul class="a" style="color:red;"> <li>魯智深</li> <li>張飛</li> <li>豬八戒</li> <li>李逵</li> </ul> ``` ``` <script> //克隆一份ul，然后放到頁面中 //先找到要克隆的ul var oldUl = document.querySelector('ul'); //克隆一個新的ul //var newUl = oldUl.cloneNode(); //只克隆ul標簽本身，不包含里面的內容 var newUl = oldUl.cloneNode(true); //克隆ul標簽并包含里面的內容 //把新的ul放到body中 document.body.appendChild(newUl); </script> ``` # 3、替換節點 > 方法：父節點.replaceChild(新節點, 待替換的節點); ``` <ul> <li>林黛玉</li> <li>賈寶玉</li> <li>薛寶釵</li> <li>劉姥姥</li> </ul> ``` ``` <script> // 父節點.replaceChild(新節點, 待替換的節點); //找父節點 var ul = document.getElementsByTagName('ul')[0]; //新節點 var newLi = document.createElement('li'); var text = document.createTextNode('王熙鳳'); newLi.appendChild(text); //找到待替換的節點 var jiabaoyu = document.getElementsByTagName('li')[1]; //執行替換 ul.replaceChild(newLi, jiabaoyu); </script> ``` # 4、刪除節點 > 方法：父節點.removeChild(子節點); HTML代碼： ``` <ul> <li>林黛玉</li> <li>賈寶玉</li> <li>薛寶釵</li> <li>劉姥姥</li> </ul> ``` > JS代碼： ``` /********************** 刪除節點 *************************/ //父節點.removeChild(子節點); var ul = document.querySelector('ul'); var xiaoLiu = document.getElementsByTagName('li')[3]; ul.removeChild(xiaoLiu); ```