js的功能是非常强大的，今天我们就录用js来做一个好玩的功能，如下图
（1）可以添加元素
（2）清楚所有的元素，
（3）点击按钮的取消可以删除元素
下面就介绍一下代码部分。首先是html部分
html部分比较简单主要是一个白色的div,用来放添加的数据
还有一个全部清除的按钮
第三部分就是用button放的三个数据，以及三个添加按钮
下面介绍一下css部分
css主要设置了白色div的，以及全部清楚按钮的样式，以及四个添加按钮的样式，位置css的布局还是比较简单
下面介绍一下js部分的代码，让他实现这些功能
《1》添加元素
首先理一下思路，1-首先获取元素，
2-并给元素加点击事件，得到要添加的元素
3创建一个元素
4，给创建的元素加入内容
5在大的空白Div中插入元素
这样元素就成功插入了。
然后是点击删除A链接删除元素，首先也是获取元素
然后加点击事件
《2》删除元素 格式是 父元素.removeChild（子元素）
oDiv.removeChild(oButton);
这样元素就删除成功了。
还有一个功能全部清楚
是用了一个while循环判断它有没有孩子节点，如果发现有孩子节点，就删除他的第一个子节点-
直到没有子节点，才完成循环，这样就全部清楚了所有的元素。
完整得js代码如下
<script>
var oBtn=document.getElementById('btn1');
var oBtn2=document.getElementById('btn2');
var oBtn3=document.getElementById('btn3');
var oDiv=document.getElementById('box');
var oClear=document.querySelector('input');
oBtn.onclick=function () {
var oP=document.getElementById('btn4');
var str=oP.value;
var oButton=document.createElement('button');
oButton.innerHTML=str+'<a href="javascript:;">取消</a>';
oDiv.appendChild(oButton);
var oA=document.querySelector('a');
oA.onclick=function () {
oDiv.removeChild(oButton);
}
}
oBtn2.onclick=function () {
var oDiv1=document.getElementById('box');
var oP1 =document.getElementById('btn5');
var str1 =oP1.value;
var oButton =document.createElement('button');//创建元素
oButton.innerHTML =str1 +'<a href="javascript:;">取消</a>';
oDiv1.appendChild(oButton);
var oA1 =document.querySelector('a');
oA1.onclick =function () {
oDiv1.removeChild(oButton);
}
}
oBtn3.onclick=function () {
var oDiv =document.getElementById('box');
var oP2 =document.getElementById('btn6');
var str2 =oP2.value;
var oButton=document.createElement('button');//创建元素
oButton.innerHTML =str2 +'<a href="javascript:;">取消</a>';
oDiv.appendChild(oButton);
var oA2 =document.querySelector('a');
oA2.onclick =function () {
oDiv.removeChild(oButton);
}
}
oClear.onclick=function () {
var oDiv=document.getElementById('box');
while(oDiv.hasChildNodes()){
oDiv.removeChild(oDiv.firstChild)
}
}
</script>
网友评论