JS点击动态添加标签、删除指定标签的代码


Posted in Javascript onApril 18, 2018

1.div标签

<div id="mDiv3">
 <p>1</p> <button onclick="myFun9()">添加</button>
</div>

2.js

function myFun9() {
 var mDiv3 = document.getElementById("mDiv3"); //获取组件1
 var eleme = document.createElement("p"); //创建组件2
 var ele_content = document.createTextNode("2");//创建节点内容
 eleme.appendChild(ele_content); // 组件添加节点
 mDiv3.appendChild(eleme); //组件2加入组件1
 }

==================删除==============================

<button onclick="myFun10()">删除</button>
 <div id="mDiv4">
 <p id="p1">1</p>
 <p id="p2">2</p>
 <p id="p3">3</p>
 <p id="p4">4</p>
 <p id="p5">5</p>
 </div>
function myFun10(){
 var parent=document.getElementById("mDiv4");
 var son=document.getElementById("p1");
 parent.removeChild(son);
 }

补充:

下面看下js-动态生成小圆点(根据轮播图图片张数动态生成小圆点)

动态生成小圆点(根据轮播图图片张数动态生成小圆点)

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Document</title>
 <style>
  body,ul{
   padding: 0;
   margin: 0;
  }
  ul{
   list-style: none;
  }
  .lunbo{
   width: 730px;
   height: 454px;
   margin: 100px auto;
   overflow: hidden;
   position: relative;
  }
  .circle{
   position: absolute;
   left: 50%;
   margin-left: -50px;
   bottom: 10px;   
  }
  .circle span{
   display: inline-block;
   width: 18px;
   height: 18px;
   background-color: #ccc;
   text-align: center;
   border-radius: 18px;
   cursor: pointer;
   margin-right:10px;
  }
  .circle span.current{
   background-color: yellow;
  }
 </style>
 <script> 
  window.onload = function(){
   function $(id){ return document.getElementById(id); }
   //动态生成轮播图小圆点
   var circle = document.createElement("div"); 
   circle.setAttribute("class","circle");
   var lis = document.getElementsByTagName("li");
   for(var i=0; i<lis.length; i++){
    var span = document.createElement("span");
    span.innerHTML = i+1;
    circle.appendChild(span);
   }
   $("scroll").appendChild(circle);
   var spanChildren = circle.children;
   spanChildren[0].setAttribute("class","current");
  }
 </script>
</head>
<body>
 <div class="lunbo" id="scroll">
  <ul id="ul">
   <li><img src="images/11.jpg" alt=""></li>
   <li><img src="images/22.jpg" alt=""></li>
   <li><img src="images/33.jpg" alt=""></li>
   <li><img src="images/44.jpg" alt=""></li>
   <li><img src="images/55.jpg" alt=""></li> 
   <li><img src="images/66.jpg" alt=""></li>
  </ul>
  <!-- <div class="circle">
   <span>1</span>
   <span class="current">2</span>
   <span>3</span>
   <span>4</span>
   <span>5</span>
   <span>6</span>
  </div> -->
 </div>
</body>
</html>
Javascript 相关文章推荐
Maps Javascript
Jan 22 Javascript
JS中图片缓冲loading技术的实例代码
Aug 29 Javascript
Jquery使用小技巧汇总
Dec 29 Javascript
使用jquery.qrcode.min.js实现中文转化二维码
Mar 11 Javascript
Bootstrap文件上传组件之bootstrap fileinput
Nov 25 Javascript
bootstrap的常用组件和栅格式布局详解
May 02 Javascript
js实现会跳动的日历效果(完整实例)
Oct 18 Javascript
bootstrap实现二级下拉菜单效果
Nov 23 Javascript
使用mixins实现elementUI表单全局验证的解决方法
Apr 02 Javascript
Angular脚手架开发的实现步骤
Apr 09 Javascript
json字符串对象转换代码实例
Sep 28 Javascript
如何在vue中使用百度地图添加自定义覆盖物(水波纹)
Nov 03 Javascript
jQuery实现的手动拖动控制进度条效果示例【测试可用】
Apr 18 #jQuery
浅谈vuepress 踩坑记
Apr 18 #Javascript
使用webpack-dev-server处理跨域请求的方法
Apr 18 #Javascript
详解webpack-dev-server 设置反向代理解决跨域问题
Apr 18 #Javascript
jQuery实现的两种简单弹窗效果示例
Apr 18 #jQuery
vue双向数据绑定知识点总结
Apr 18 #Javascript
浅析vue中常见循环遍历指令的使用 v-for
Apr 18 #Javascript
You might like
PHP4引用文件语句的对比
2006/10/09 PHP
用PHP生成html分页列表的代码
2007/03/18 PHP
PHP数据类型之整数类型、浮点数的介绍
2013/04/28 PHP
Symfony2框架学习笔记之表单用法详解
2016/03/18 PHP
php实现在线通讯录功能(附源码)
2016/05/13 PHP
Yii2中事务的使用实例代码详解
2016/09/07 PHP
php实现微信模拟登陆、获取用户列表及群发消息功能示例
2017/06/28 PHP
laravel在中间件内生成参数并且传递到控制器中的2种姿势
2019/10/15 PHP
从QQ网站中提取的纯JS省市区三级联动菜单
2013/12/25 Javascript
js如何打印object对象
2015/10/16 Javascript
原生JS实现瀑布流插件
2018/02/06 Javascript
Bootstrap标签页(Tab)插件切换echarts不显示问题的解决
2018/07/13 Javascript
微信小程序视图控件与bindtap之间的问题的解决
2019/04/08 Javascript
JS实现拼图游戏
2021/01/29 Javascript
js实现上传图片并显示图片名称
2019/12/18 Javascript
JS localStorage存储对象,sessionStorage存储数组对象操作示例
2020/02/15 Javascript
跟老齐学Python之重回函数
2014/10/10 Python
python文件操作之批量修改文件后缀名的方法
2018/08/10 Python
python获取微信小程序手机号并绑定遇到的坑
2018/11/19 Python
对python的输出和输出格式详解
2018/12/08 Python
python判断单向链表是否包括环,若包含则计算环入口的节点实例分析
2019/10/23 Python
python 项目目录结构设置
2020/02/14 Python
html5 Canvas画图教程(7)—canvas里画曲线之quadraticCurveTo方法
2013/01/09 HTML / CSS
Avène雅漾美国官方网站:敏感肌肤护理专家
2016/10/24 全球购物
顶级宝石首饰网络零售商:Angara
2016/10/25 全球购物
全球最大的瓷器、水晶和银器零售商:Replacements
2020/06/15 全球购物
Delphi笔试题
2016/11/14 面试题
搞笑创意广告语
2014/03/17 职场文书
家长给学校的建议书
2014/05/15 职场文书
2014年领导班子工作总结
2014/12/11 职场文书
街道社区活动报告
2015/02/05 职场文书
社区工作者个人总结
2015/02/28 职场文书
2015年电厂工作总结范文
2015/05/13 职场文书
小学语文教学随笔
2015/08/14 职场文书
SpringBoot详解执行过程
2022/07/15 Java/Android
前端传参数进行Mybatis调用mysql存储过程执行返回值详解
2022/08/14 MySQL