1.appendChild()方法 效果类似于剪切的
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>操作dom树</title> <style type="text/css"> #div1{ width:200px; height:150px; border:2px solid red; } #div2{ width: 250px; height: 150px; border: 5px dashed gray; } </style> </head> <body> <div id="div1"> <ul id="ulidl"> <li>黑云压城城欲摧</li> <li>甲光金鳞向日开</li> <li>但使龙城飞将在</li> <li>不教胡马度阴山</li> </ul> </div> <div id="div2"></div> <input type="button" value="添加" onclick="add11();"> <script type="text/javascript"> function add11(){ //获取div2的节点标签 var div2 = document.getElementById("div2"); //先获取ul节点标签 var ul1 = document.getElementById("ulidl"); //将ul节点标签添加到div2节点下 div2.appendChild(ul1); } </script> </body> </html>
对节点操作前效果:
对节点操作后效果:
2.insertBefore(newNode,oldNode)方法 在某个节点之前插入一个新的节点
第一个参数为要插入的新节点 第二个参数为参照节点(新节点插入在此节点之前)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>操作dom对象二</title> </head> <body> <ul id="ulid2"> <li id="lil1">西施</li> <li id="lil2">貂蝉</li> <li id="lil3">杨玉环</li> <li id="lil4">王昭君</li> </ul> <input type="button" value="添加" onclick="insert1();"> <script type="text/javascript"> //1.获取到lil3标签 //2.创建li //3.创建文本 //4.把文本添加到li下面 //5.获取到ul //6.把li添加到ul下面在貂蝉之前 function insert1(){ //获取到lil3标签 var li3 = document.getElementById("lil3"); //创建li var li5 = document.createElement("li"); //创建文本 var texts = document.createTextNode("董小宛"); //把文本添加到li下面 li5.appendChild(texts); //获取到ul var ul2 = document.getElementById("ulid2"); //在<li>貂蝉<li/>之前添加 <li>董小宛<li/> ul2.insertBefore(li5,li3); } </script> </body> </html>
操作前:
操作后:
3.removeChild()删除子节点
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>操作dom树三</title> </head> <body> <ul id="ulid"> <li id="liid1">沉鱼落雁</li> <li id="liid2">闭月羞花</li> <li id="liid3">翩若惊鸿</li> <li id="liid4">婉若游龙</li> </ul> <!-- 删除翩若惊鸿 1.获取到ul标签 2.获取liid3子标签 3.调用removeChild方法删除ul标签的子节点标签翩若惊鸿 --> <input type="button" value="点我" onclick="removes();"> <script type="text/javascript"> function removes(){ var ul = document.getElementById("ulid"); var li3 = document.getElementById("liid3"); ul.removeChild(li3); } </script> </body> </html>
删除前:
删除后:
4.replaceChild()替换子节点
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>操作dom树对象四</title> </head> <body> <ul id="ulid"> <li id="liid1">沉鱼落雁</li> <li id="liid2">闭月羞花</li> <li id="liid3">翩若惊鸿</li> <li id="liid4">婉若游龙</li> </ul> <input type="button" value="点我" onclick="replaces();"> <!-- 替换子节点liid1标签 1.获取ul标签 2.获取liid1标签 3.创造li标签 4.创造文本 5.将文本添加到li标签中 6.将标签替换 --> <script type="text/javascript"> function replaces(){ //获取ul标签 var ul = document.getElementById("ulid"); var li1 = document.getElementById("liid1"); var li5 = document.createElement("li"); var texts = document.createTextNode("荣耀秋菊,华若春松"); li5.appendChild(texts); ul.replaceChild(li5,li1); } </script> </body> </html>
替换前:
替换后:
5.cloneNode()复制节点
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>操作dom树五</title> </head> <body> <ul id="ulid"> <li id="liid1">谁知林栖者</li> <li id="liid2">闻风坐相悦</li> <li id="liid3">草木有本心</li> <li id="liid4">何求美人折</li> </ul> <div id="div"></div> <input type="button" value="clone" onclick="clones();"> <!-- 复制ul标签中的元素到div标签中 1.先获得ul标签 2.获得div标签 3.用一个副本接收复制的ul标签 4.将副本插入到div中 --> <script type="text/javascript"> function clones(){ var ul = document.getElementById("ulid"); var div = document.getElementById("div"); var copyul = ul.cloneNode(true); div.appendChild(copyul); } </script> </body> </html>
替换前:
替换后:
