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 相关文章推荐
JavaScript面向对象之静态与非静态类
Feb 03 Javascript
JQuery获取文本框中字符长度的代码
Sep 29 Javascript
jQuery div层的放大与缩小简单实现代码
Mar 28 Javascript
谈谈我对JavaScript原型和闭包系列理解(随手笔记6)
Dec 20 Javascript
Bootstrap按钮功能之查询按钮和重置按钮
Oct 26 Javascript
详解JavaScript的内置对象
Dec 07 Javascript
jQuery Ajax请求后台数据并在前台接收
Dec 10 Javascript
浅谈React + Webpack 构建打包优化
Jan 23 Javascript
在vue-cli项目中使用bootstrap的方法示例
Apr 21 Javascript
JS重学系列之聊聊new操作符
Mar 04 Javascript
javascript实现对话框功能警告(alert 消息对话框)确认(confirm 消息对话框)
May 07 Javascript
个人小程序接入支付解决方案
May 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
Yii实现显示静态页的方法
2016/04/25 PHP
php实现微信扫码自动登陆与注册功能
2016/09/22 PHP
php mysql实现mysql_select_db选择数据库
2016/12/30 PHP
php 实现简单的登录功能示例【基于thinkPHP框架】
2019/12/02 PHP
jQuery的显示和隐藏方法与css隐藏的样式对比
2013/10/18 Javascript
javascript 获取网页标题代码实例
2014/01/22 Javascript
javascript实现动态侧边栏代码
2014/02/19 Javascript
通过JS来动态的修改url,实现对url的增删查改
2014/09/01 Javascript
js实现文本框宽度自适应文本宽度的方法
2015/08/13 Javascript
基于html5和nodejs相结合实现websocket即使通讯
2015/11/19 NodeJs
Ubuntu 16.04 64位中搭建Node.js开发环境教程
2016/10/19 Javascript
jQuery访问json文件中数据的方法示例
2019/01/28 jQuery
解决JQuery的ajax函数执行失败alert函数弹框一闪而过问题
2019/04/10 jQuery
使用layer.msg 时间设置不起作用的解决方法
2019/09/12 Javascript
layui监听单元格编辑前后交互的例子
2019/09/16 Javascript
JS apply用法总结和使用场景实例分析
2020/03/14 Javascript
vantUI 获得piker选中值的自定义ID操作
2020/11/04 Javascript
[03:00]2018完美盛典_最佳英雄奖
2018/12/17 DOTA
使用相同的Apache实例来运行Django和Media文件
2015/07/22 Python
Python中模块string.py详解
2017/03/12 Python
利用pandas读取中文数据集的方法
2018/07/25 Python
Python 给某个文件名添加时间戳的方法
2018/10/16 Python
启动Atom并运行python文件的步骤
2018/11/09 Python
jupyter notebook tensorflow打印device信息实例
2020/04/20 Python
什么是Python包的循环导入
2020/09/08 Python
Python requests上传文件实现步骤
2020/09/15 Python
师范学院毕业生求职信范文
2013/12/26 职场文书
公司门卫管理制度
2014/02/01 职场文书
八年级美术教学反思
2014/02/02 职场文书
乡镇干部先进事迹材料
2014/02/03 职场文书
学习党的群众路线教育实践活动心得体会
2014/03/01 职场文书
毕业生就业意向书
2014/04/01 职场文书
司法局火灾防控方案
2014/06/05 职场文书
2014年宣传部个人工作总结
2014/12/06 职场文书
《鸡兔同笼》教学反思
2016/02/19 职场文书
Go语言并发编程 sync.Once
2021/10/16 Golang