JS创建Tag标签的方法详解


Posted in Javascript onJune 09, 2017

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

一 . 创建标签其原理就是

创建一个节点;

var x = document.createElement("TagName")

赋予节点样式;

x.setAttribute("class",类名)

对节点进行赋值;

x.innerHTML = 内容 //赋值

添加节点到父元素

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

二. 样式图:

JS创建Tag标签的方法详解

三. 主要代码流程:

HTML部分:

<div class="container">
    <h3 style="text-align: center">单击下面得"添加"按钮添加标签</h3>
    <div class="dispanel" id="box"></div>
    <button class="btn" id="btn1">全部清除</button>
    <ul id="ul">
      <li><span>John Doe1</span> <button class="clibtn btn">添加</button></li>
      <li><span>John Doe2</span> <button class="clibtn btn">添加</button></li>
      <li><span>John Doe3</span> <button class="clibtn btn">添加</button></li>
      <li><span>John Doe4</span> <button class="clibtn btn">添加</button></li>
      <li><span>John Doe5</span> <button class="clibtn btn">添加</button></li>
      <li><span>John Doe6 </span><button class="clibtn btn">添加</button></li>
    </ul>
</div>

css部分:

body{
  margin:0 ;
  padding:0;
  background-color:#002F4F;
  color: #ffffff;
  font-family: "微软雅黑";
  font-size: 1em;
}
ul,h3{margin: 0;
  list-style: none;
padding: 0px}
.container{
  width:300px;
  height:350px;
  margin: 50px auto;
}
.dispanel{
  width: 290px;
  height:50px;
  background-color: #ffffff;
  margin: 0 auto;
}
.btn{
  width:100px;
  height:20px;
  color: #ffffff;
  background-color:red;
  border: 0px;
  font-size: 1em;
  margin:10px 0 10px 5px;
}
.container ul li{
  width:300px;
  height:30px;
  margin-top:10px;
}
.spanstyle{display: inline-block;
  color:#000;
  width:85px;height:22px;
  background-color: bisque;
  margin-left:5px;
  font-size: 12px;
  text-align: center;
  line-height: 22px;
}

js部分:

var oUl = document.getElementById("ul");
var oBtn = oUl.getElementsByClassName("btn");
var oLi = document.getElementsByClassName("li");
var oBox = document.getElementById("box");
for(var i = 0;i<oBtn.length;i++) {
    oBtn[i].onclick = function () {
      var oA = document.createElement("span");  //创建一个节点Node
      var oNew = oA.setAttribute("class", "spanstyle"); //将节点上增加class样式
      var ospan = this.previousElementSibling.innerHTML + " X"; //this == oBtn[i] / previousElementSiling:上一个元素的兄弟节点 即 <span>
      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页面元素操作技巧总结》、《javascript面向对象入门教程》、《JavaScript切换特效与技巧总结》、《JavaScript查找算法技巧总结》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》

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

Javascript 相关文章推荐
不要小看注释掉的JS 引起的安全问题
Dec 27 Javascript
javascript一元操作符(递增、递减)使用示例
Aug 07 Javascript
JQuery插件fancybox无法在弹出层使用左右键的解决办法
Dec 25 Javascript
深入探讨JavaScript、JQuery屏蔽网页鼠标右键菜单及禁止选择复制
Jun 10 Javascript
字段太多jquey快速清空表单内容方法
Aug 21 Javascript
表单input项使用label同时引用Bootstrap库导致input点击效果区增大问题
Oct 11 Javascript
100多个基础常用JS函数和语法集合大全
Feb 16 Javascript
微信小程序实现的涂鸦功能示例【附源码下载】
Jan 12 Javascript
关于Google发布的JavaScript代码规范你要知道哪些
Apr 04 Javascript
JavaScript变量声明var,let.const及区别浅析
Apr 23 Javascript
微信小程序发布新版本时自动提示用户更新的方法
Jun 07 Javascript
在vue中封装的弹窗组件使用队列模式实现方法
Jul 23 Javascript
JavaWeb表单及时验证功能在输入后立即验证(含用户类型,性别,爱好...的验证)
Jun 09 #Javascript
JS实现的随机排序功能算法示例
Jun 09 #Javascript
JQuery form表单提交前验证单选框是否选中、删除记录时验证经验总结(整理)
Jun 09 #jQuery
JQuery.dataTables表格插件添加跳转到指定页
Jun 09 #jQuery
基于代数方程库Algebra.js解二元一次方程功能示例
Jun 09 #Javascript
JavaScript 中调用 Kotlin 方法实例详解
Jun 09 #Javascript
angularjs $http实现form表单提交示例
Jun 09 #Javascript
You might like
探讨:parse url解析URL,返回其组成部分
2013/06/14 PHP
解析php中array_merge与array+array的区别
2013/06/21 PHP
ThinkPHP使用smarty模板引擎的方法
2014/07/01 PHP
PHP随手笔记整理之PHP脚本和JAVA连接mysql数据库
2015/11/25 PHP
PHP实现关键字搜索后描红功能示例
2019/07/03 PHP
JavaScript表达式:URL 协议介绍
2013/03/10 Javascript
JS比较两个时间大小的简单示例代码
2013/12/20 Javascript
Javascript WebSocket使用实例介绍(简明入门教程)
2014/04/16 Javascript
jquery实现将获取的颜色值转换为十六进制形式的方法
2014/12/20 Javascript
js兼容pc端浏览器并有多种弹出小提示的手机端浮层控件实例
2015/04/29 Javascript
分享使用AngularJS创建应用的5个框架
2015/12/05 Javascript
jquery UI Datepicker时间控件冲突问题解决
2016/12/16 Javascript
JavaScript数组操作详解
2017/02/04 Javascript
Vue项目中如何引入icon图标
2018/03/28 Javascript
boostrap模态框二次弹出清空原有内容的方法
2018/08/10 Javascript
如何去除富文本中的html标签及vue、react、微信小程序中的过滤器
2018/11/21 Javascript
vue cli3.0 引入eslint 结合vscode使用
2019/05/27 Javascript
JS中数组实现代码(倒序遍历数组,数组连接字符串)
2019/12/29 Javascript
基于vue-draggable 实现三级拖动排序效果
2020/01/10 Javascript
javascript设计模式 ? 代理模式原理与用法实例分析
2020/04/16 Javascript
跟老齐学Python之有容乃大的list(3)
2014/09/15 Python
python 数据的清理行为实例详解
2017/07/12 Python
如何将anaconda安装配置的mmdetection环境离线拷贝到另一台电脑
2020/10/15 Python
HTML5中如何显示视频呢 HTML5视频播放demo
2013/06/08 HTML / CSS
英国第一独立滑雪板商店:The Snowboard Asylum
2020/01/16 全球购物
电钳工人个人求职信
2014/05/10 职场文书
村党支部书记承诺书
2014/05/29 职场文书
夫妻双方自愿离婚协议书怎么写
2014/12/01 职场文书
小学生思想品德评语
2014/12/31 职场文书
政协委员个人总结
2015/03/03 职场文书
小学生红领巾广播稿
2015/08/19 职场文书
成人成长感言如何写?
2019/08/16 职场文书
Python Django框架介绍之模板标签及模板的继承
2021/05/27 Python
纯CSS3实现div按照顺序出入效果
2021/07/15 HTML / CSS
Anaconda配置各版本Pytorch的实现
2021/08/07 Python
使用jpa之动态插入与修改(重写save)
2021/11/23 Java/Android