元素相关的操作方法!
<!DOCTYPE html>
<html lang="en">
<meta charset="UTF-8">
div {
width:200px;
height:200px;
border:1px solid red;
}
<input type="button" value="显示效果" id="btn1"/>
<input type="button" value="清除第一个子元素" id="btn2"/>
<input type="button" value="清除所有的元素" id="btn3"/>
<div id="dv">
<script src="common.js">
var i =0;
my$("btn1").onclick =function () {
i++;
var obj = document.createElement("input");
obj.type ="button";
obj.value ="按钮" + i;
my$("dv").appendChild(obj); //追加子元素
//把新的子元素插入到第一个子元素的前面
my$("dv").insertBefore(obj,my$("dv").firstChild);
//把新的子元素直接代替到第一个子元素的前面
//my$("dv").replaceChild(obj,my$("dv").firstChild);
};
my$("btn2").onclick =function () {
//移除父级元素中的第一个子级元素
my$("dv").removeChild(my$("dv").firstElementChild);
};
my$("btn3").onclick =function () {
//点击按钮删除div中所有的子集元素
//判断父级元素中有没有第一个子元素
while(my$("dv").firstElementChild){
my$("dv").removeChild(my$("dv").firstElementChild);
}
};
</html>
通过本次学习主要需要掌握:
通过利用i来appendChild(追加元素);
insertChild(插入到哪个元素之前),其方法里用到了两个元素,第一个是放置原来的元素,第二个是放置需要插入的位置;
replaceChild(代替到哪个元素),其方法与insertChild一样;
removeChild(移除元素),其方法里面只需要写入需要移除元素的位置即可。
若想移除所有元素,则可以利用循环访问是否还有第一个元素,若有则执行removeChild方法,反之跳出循环或不执行循环语句即可。