带你彻底学会JS DOM技术之删除，复制，替换元素
带你彻底学会JS DOM技术之删除，复制，替换元素
- 1.删除元素
- 2.复制元素
- 3.替换元素
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>IMUSTCTFtitle><script src="js/index.js">script>
head>
<body><ul id="list"><li>HTMLli><li>CSSli><li>JSli><li>VUEli>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>IMUSTCTFtitle><script src="js/index.js">script>
head>
<body><ul id="list"><li>HTMLli><li>CSSli><li>JSli><li>VUEli>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>JavaScriptp><hr/>输入标签：<input id="tag" type="text" /><br />输入内容：<input id="txt" type="text" /><br /><input id="btn" type="button" value="替换" />
body>
html>
文本框中输入信息，点击替换，结果如下：
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！