Node节点方法
- appendChild() 向节点的子节点列表的结尾追加一个新的子节点
例子
<style>
#box{width: 1000px;height:200px;background: #2b669a;}
img{width: 40px;height: 40px;float: left;margin-right: 10px;}
</style>
<script>
function f() {
var box = document.getElementById("box");
var pic = document.getElementById("pic");
box.appendChild(pic);
}
</script>
<div id="box">
<img src="img/i1.png">
<img src="img/i2.jpg">
<img src="img/i3.jpg">
</div>
<img src="img/xing.jpg" id="pic">
<button onclick="f()">append</button>
运行结果
- cloneChild() 复制节点(参数为真,则复制子元素,如果参数为假的话,就不复制子元素)
例子
这个是只能复制粘贴一个的,css样式同上
<script>
function f() {
var box = document.getElementById("box");
var pic = document.getElementById("pic");
var img = pic.cloneNode();
box.appendChild(img);
}
</script>
<div id="box">
<img src="img/i1.png">
<img src="img/i2.jpg">
<img src="img/i3.jpg">
</div>
<img src="img/xing.jpg" id="pic">
<button onclick="f()">clone</button>
运行结果
这个是一次能粘5个,但是限制次数只能粘3次,只有js标签不一样。
<script>
var j = 0;
var t = 0;
function f() {
if(t<3){
var box = document.getElementById("box");
var pic = document.getElementById("pic");
for(var i = 0; i<3;i++){
var img = pic.cloneNode();
img.id="pic"+j;
box.appendChild(img);
}
}
t++;
}
</script>
参数为真,则复制子元素,如果参数为假的话,就不复制子元素,通过下面这个例子就会明白。
function f() {
var box = document.getElementById("box");
var img = document.getElementById("img");
var index = img.cloneNode(true);
//cloneChild()里面参数为true,则可以复制子元素,否则不能复制子元素
box.appendChild(index);
}
<div id="box">
<img src="img/i1.png">
<img src="img/i2.jpg">
<img src="img/i3.jpg">
</div>
<div id="img" style="background: #2b542c;width: 50px;height: 50px;">
<img src="img/i1.png" id="pic">
</div>
<button onclick="f()">复制</button>
参数不为true时运行结果为:下图,就是把盒子粘贴过去但是盒子里面的图片没有粘贴过去。
参数为true时,运行结果如下图,就说盒子同里面的图片一起都被粘贴了。
- insertBefore() 在指定的子节点之前插入新的子节点
例子
<script>
function f() {
var box = document.getElementById("box");
var pic = document.getElementById("pic");
var img = document.getElementsByTagName("img");
box.insertBefore(pic,img[1]);
}
</script>
<div id="box">
<img src="img/i1.png">
<img src="img/i2.jpg">
<img src="img/i3.jpg">
</div>
<img src="img/xing.jpg" id="pic">
<button onclick="f()">insert</button>
运行结果
- replaceChild() 用一个新的子节点替换指定的子节点
例子
扫描二维码关注公众号,回复:
9988480 查看本文章
<script>
function f() {
var box = document.getElementById("box");
var pic = document.getElementById("pic");
var img = document.getElementsByTagName("img");
box.replaceChild(pic,img[1]);
}
</script>
<div id="box">
<img src="img/i1.png">
<img src="img/i2.jpg">
<img src="img/i3.jpg">
</div>
<img src="img/xing.jpg" id="pic">
<button onclick="f()">replace</button>
运行结果
- removeChild() 删除并返回当前节点的指定子节点
例子
<script>
function f() {
var box = document.getElementById("box");
var img = document.getElementsByTagName("img");
box.removeChild(img[2]);
}
</script>
<div id="box">
<img src="img/i1.png">
<img src="img/i2.jpg">
<img src="img/i3.jpg">
<img src="img/xing.jpg">
</div>
<button onclick="f()">remove</button>
运行结果
- document.createElement() 创建节点
例子
<style>
#box{width: 1000px;height:200px;background: #2b669a;}
</style>
<script>
function f() {
var box = document.getElementById("box");
var div = document.createElement("div");
div.style.width=100+"px";
div.style.height=100+"px";
div.style.background="yellow";
box.appendChild(div);
}
</script>
<div id="box"></div>
<button onclick="f()">create</button>
运行结果