美文网首页
javascript:单击下面的添加按钮,添加标签

javascript:单击下面的添加按钮,添加标签

作者: liyao丶 | 来源:发表于2018-09-24 20:02 被阅读0次

    首先,这个网页的页面效果为

    当点击下面的添加按钮时,上面的大框框就会添加对应的内容。

    然后,点击后面的“x”也可以单个清除,当点击全部清除时则清空所有标签。下面让我们看看用代码怎么实现吧。

    首页:布局代码为:

    上面的大框是一个div、然后有一个全部清除的按钮,id为'btn1',然后下面的标签为无序列表

    然后是js代码部分:

    首先,获取元素,接着for循环,然后用自执行匿名函数给每个li添加单击事件,然后var str=列表的文本内容,接着创建一个元素oH(元素类型为h3),然后给oH添加内容,内容是列表的文本内容加上一个超链接(超链接文本为  'X' ),接着插入元素,然后获取a标签。

    oA.onclick=function表示点击'X'时,删除子节点。

    最后给全部清除按钮加单击事件,当单击时,将内容设置为空,就可以啦。然后整个页面就完成啦!

    相关文章

      网友评论

          本文标题:javascript:单击下面的添加按钮,添加标签

          本文链接:https://www.haomeiwen.com/subject/nujhoftx.html