# 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); ```