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>
文本框中输入信息,点击替换,结果如下