首先,这个网页的页面效果为
当点击下面的添加按钮时,上面的大框框就会添加对应的内容。
然后,点击后面的“x”也可以单个清除,当点击全部清除时则清空所有标签。下面让我们看看用代码怎么实现吧。
首页:布局代码为:
上面的大框是一个div、然后有一个全部清除的按钮,id为'btn1',然后下面的标签为无序列表
然后是js代码部分:
首先,获取元素,接着for循环,然后用自执行匿名函数给每个li添加单击事件,然后var str=列表的文本内容,接着创建一个元素oH(元素类型为h3),然后给oH添加内容,内容是列表的文本内容加上一个超链接(超链接文本为 'X' ),接着插入元素,然后获取a标签。
oA.onclick=function表示点击'X'时,删除子节点。
最后给全部清除按钮加单击事件,当单击时,将内容设置为空,就可以啦。然后整个页面就完成啦!
网友评论