1.删除元素
在JavaScript中，我们可以使用removeChild()方法来删除父元素下的某个子元素
A.removeChild(B);
A表示父元素，B表示父元素内部的某个子元素
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>IMUSTCTF</title> <script src="js/index.js"></script> </head> <body> <ul id="list"> <li>HTML</li> <li>CSS</li> <li>JS</li> <li>VUE</li> </ul> <input type="button" id="btn" value="删除最后一个"/> </body> </html>
window.onload=function() { var oBtn = document.getElementById("btn"); oBtn.onclick = function() { var oUl = document.getElementById("list"); oUl.removeChild(oUl.lastElementChild); } }
页面点击删除元素后，会删除页面列表的最后一项：
2.复制元素
在JavaScript中，我们可以使用cloneNode()方法来实现复制元素
obj.cloneNode(bool)
参数obj表示被复制的元素，而参数bool是一个布尔值，取值如下。
1或true：表示复制元素本身以及复制该元素下的所有子元素。
0或false：表示仅仅复制元素本身，不复制该元素下的子元素。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>IMUSTCTF</title> <script src="js/index.js"></script> </head> <body> <ul id="list"> <li>HTML</li> <li>CSS</li> <li>JS</li> <li>VUE</li> </ul> <input type="button" id="btn" value="复制列表"/> </body> </html>
window.onload=function() { var oBtn = document.getElementById("btn"); oBtn.onclick = function() { var oUl = document.getElementById("list"); document.body.appendChild(oUl.cloneNode(1)); } }
点击复制后，会对整个列表进行复制：
3.替换元素
在JavaScript中，我们可以使用replaceChild()方法来实现替换元素
A.replaceChild(new,old);
A表示父元素，new表示新子元素，old表示旧子元素
案例：
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <script> window.onload=function() { var oBtn=document.getElementById("btn"); oBtn.onclick=function() { //获取body中的第1个元素 var oFirst=document.querySelector("body *:first-child"); //获取2个文本框 var oTag=document.getElementById("tag"); var oTxt=document.getElementById("txt"); //根据2个文本框的值来创建一个新节点 var oNewTag=document.createElement(oTag.value); var oNewTxt=document.createTextNode(oTxt.value); oNewTag.appendChild(oNewTxt); document.body.replaceChild(oNewTag,oFirst); } } </script> </head> <body> <p>JavaScript</p> <hr/> 输入标签：<input id="tag" type="text" /><br /> 输入内容：<input id="txt" type="text" /><br /> <input id="btn" type="button" value="替换" /> </body> </html>
文本框中输入信息，点击替换，结果如下
