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代码如下
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+'取消';
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 +'取消';
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 +'取消';
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)
}
}