JS创建Tag标签的方法详解

前端之家收集整理的这篇文章主要介绍了JS创建Tag标签的方法详解前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

本文实例讲述了JS创建Tag标签方法分享给大家供大家参考,具体如下:

一 . 创建标签其原理就是

创建一个节点;

赋予节点样式;

对节点进行赋值;

内容 //赋值

添加节点到父元素

添加到的元素.appendChild(x);

二. 样式图:

三. 主要代码流程:

HTML部分:

添加"按钮添加标签
Box">
  • John Doe2
  • John Doe3
  • John Doe4
  • John Doe5
  • John Doe6
  • css部分:

    js部分:

    Box = document.getElementById("Box"); for(var i = 0;i增加class样式 var ospan = this.prevIoUsElementSibling.innerHTML + " X"; //this == oBtn[i] / prevIoUsElementSiling:上一个元素的兄弟节点 即 oA.innerHTML = ospan; //将ospa的值付给新创建的节点Node oA. oBox.appendChild(oA); //将oA 添加为oBox的儿子 oA.onclick=function () { oBox.removeChild(oA); //移除这个元素 } } } var obtn1 = document.getElementById("btn1"); obtn1.onclick=function () { oBox.innerHTML=""; //清除内容 }

    更多关于JavaScript相关内容可查看本站专题:《》、《》、《》、《》、《》、《》、《》及《

    希望本文所述对大家JavaScript程序设计有所帮助。

    原文链接:https://www.f2er.com/js/38725.html

    猜你在找的JavaScript相关文章