<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.box1,
.box2{
width: 300px;
height: 250px;
margin-top: 10px;
margin-bottom: 30px;
border: 1px solid green;
}
.box1 > div,
.box2 > div{
border: 1px solid red;
margin: 5px;
padding: 10px 5px;
}
</style>
<script type="text/javascript">
//测试创建元素
function testCreate(){
var div = document.createElement("div");
div.innerHTML = "this is a new div";
div.style.color = "green";
var target = document.querySelector('.box1');
var target2 = document.querySelector('.box2');
target.appendChild(div);
//cloneNode 克隆元素 传值为true的时候 为深层次克隆 false为浅层次克隆
target2.appendChild(div.cloneNode(true));
}
function testInertBefore(){
var box11 = document.querySelector(".box1 > .box11");
var box22 = document.querySelector(".box2 > .box22");
var parent = document.querySelector(".box2");
parent.insertBefore(box11.cloneNode(true),box22);
}
function testReplaceChild(){
var box11 = document.querySelector(".box1 > .box11");
var box22 = document.querySelector(".box2 > .box22");
var parent = document.querySelector(".box2");
parent.replaceChild(box11,box22);
}
function testRemoveChild(){
var box22 = document.querySelector(".box2 > .box22");
var parent = document.querySelector(".box2");
parent.removeChild(box22);
}
</script>
</head>
<body>
<input type="button" onclick="testCreate()" value="create">
<input type="button" onclick="testInertBefore()" value="testInertBefore">
<input type="button" onclick="testReplaceChild()" value="testReplaceChild">
<input type="button" onclick="testRemoveChild()" value="testRemoveChild">
<hr>
<div class="box1">
<div class="box11">this is a div test 11</div>
<div class="box12">this is a div test 12</div>
<div class="box13">this is a div test 13</div>
<div class="box14">this is a div test 14</div>
</div>
<div class="box2">
<div class="box21">this is a div test 21</div>
<div class="box22">this is a div test 22</div>
<div class="box23">this is a div test 23</div>
<div class="box24">this is a div test 24</div>
</div>
</body>
</html>
js中改变文档的层次结构(创建元素节点,添加结点,插入子节点,取代子节点,删除子节点)
转载本文章为转载内容,我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题,欢迎原作者联系我们进行内容更正或删除文章。
下一篇:js中创建table表格
提问和评论都可以,用心的回复会被更多人看到
评论
发布评论
相关文章
-
js查找元素的亲戚节点 副节点 子节点 兄弟节点
js查找元素的亲戚节点 副节点 子节点 兄弟节点。
javascript 前端 开发语言 html i++ -
javascript 删除子节点 js创建节点,删除节点
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> </head> <body> <ul id="box">
javascript 删除子节点 html javascript 数据