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 相关文章推荐
40个有创意的jQuery图片和内容滑动及弹出插件收藏集之三
Jan 03 Javascript
ASP.NET MVC中EasyUI的datagrid跨域调用实现代码
Mar 14 Javascript
js中的前绑定和后绑定详解
Aug 01 Javascript
如何在JavaScript中实现私有属性的写类方式(一)
Dec 04 Javascript
jQuery实现高亮显示网页关键词的方法
Aug 07 Javascript
基于Bootstrap的Metronic框架实现条码和二维码的生成及打印处理操作
Aug 29 Javascript
JS判断是否手机或pad访问实现方法
Dec 09 Javascript
删除table表格行的实例讲解
Sep 21 Javascript
js前端导出Excel的方法
Nov 01 Javascript
Vue.js结合bootstrap前端实现分页和排序效果
Dec 29 Javascript
Vue中的transition封装组件的实现方法
Aug 13 Javascript
layui的表单验证支持ajax判断用户名是否重复的实例
Sep 06 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
php实现文件下载实例分享
2014/06/02 PHP
PHP新特性详解之命名空间、性状与生成器
2017/07/18 PHP
php workerman定时任务的实现代码
2018/12/23 PHP
a标签click和href执行顺序探讨
2014/06/23 Javascript
arguments对象验证函数的参数是否合法
2015/06/26 Javascript
纯javascript实现的小游戏《Flappy Pig》实例
2015/07/27 Javascript
全面了解JS中的匿名函数
2016/06/29 Javascript
jquery 仿锚点跳转到页面指定位置的实例
2017/02/14 Javascript
jquery实现焦点轮播效果
2017/02/23 Javascript
无循环 JavaScript(map、reduce、filter和find)
2017/04/08 Javascript
详解weex默认webpack.config.js改造
2018/01/08 Javascript
vue中post请求以a=a&amp;b=b 的格式写遇到的问题
2018/04/27 Javascript
用Node提供静态文件服务的方法
2018/07/06 Javascript
JavaScript实现轮播图效果代码实例
2019/09/28 Javascript
python实现rest请求api示例
2014/04/22 Python
PyQt5每天必学之日历控件QCalendarWidget
2018/04/19 Python
python实现括号匹配的思路详解
2018/08/23 Python
python redis 删除key脚本的实例
2019/02/19 Python
详解将Python程序(.py)转换为Windows可执行文件(.exe)
2019/07/19 Python
Python如何应用cx_Oracle获取oracle中的clob字段问题
2019/08/27 Python
Python3.7+tkinter实现查询界面功能
2019/12/24 Python
关于Pytorch的MLP模块实现方式
2020/01/07 Python
django 前端页面如何实现显示前N条数据
2020/03/16 Python
python 利用zmail库发送邮件
2020/09/11 Python
Python中读取文件名中的数字的实例详解
2020/12/25 Python
购买一个高级域名:BuyDomains
2018/03/11 全球购物
编程输出如下图形
2013/11/24 面试题
J2ee常用的设计模式?说明工厂模式
2015/05/21 面试题
英语一分钟演讲稿
2014/04/29 职场文书
爱与责任师德演讲稿
2014/08/26 职场文书
2015年艾滋病宣传活动总结
2015/03/27 职场文书
2015年党风廉政建设工作总结
2015/04/09 职场文书
追悼会悼词大全
2015/06/23 职场文书
2016大学先进团支部事迹材料
2016/03/01 职场文书
Python数据分析之pandas函数详解
2021/04/21 Python
win11高清晰音频管理器在哪里?win11找不到高清晰音频管理器解决办法
2022/04/08 数码科技