js小功能之-添加元素-清楚元素

js的功能是非常强大的,今天我们就录用js来做一个好玩的功能,如下图

(1)可以添加元素


js小功能之-添加元素-清楚元素_第1张图片

(2)清楚所有的元素,


js小功能之-添加元素-清楚元素_第2张图片

(3)点击按钮的取消可以删除元素

下面就介绍一下代码部分。首先是html部分


js小功能之-添加元素-清楚元素_第3张图片

html部分比较简单主要是一个白色的div,用来放添加的数据

还有一个全部清除的按钮

第三部分就是用button放的三个数据,以及三个添加按钮

下面介绍一下css部分


js小功能之-添加元素-清楚元素_第4张图片


js小功能之-添加元素-清楚元素_第5张图片



js小功能之-添加元素-清楚元素_第6张图片
js小功能之-添加元素-清楚元素_第7张图片

css主要设置了白色div的,以及全部清楚按钮的样式,以及四个添加按钮的样式,位置css的布局还是比较简单

下面介绍一下js部分的代码,让他实现这些功能


js小功能之-添加元素-清楚元素_第8张图片

《1》添加元素

首先理一下思路,1-首先获取元素,

2-并给元素加点击事件,得到要添加的元素

3创建一个元素

4,给创建的元素加入内容

5在大的空白Div中插入元素

这样元素就成功插入了。

然后是点击删除A链接删除元素,首先也是获取元素

然后加点击事件


《2》删除元素   格式是 父元素.removeChild(子元素)

 oDiv.removeChild(oButton);

这样元素就删除成功了。

js小功能之-添加元素-清楚元素_第9张图片

还有一个功能全部清楚

是用了一个while循环判断它有没有孩子节点,如果发现有孩子节点,就删除他的第一个子节点-

直到没有子节点,才完成循环,这样就全部清楚了所有的元素。

完整得js代码如下

你可能感兴趣的:(js小功能之-添加元素-清楚元素)