JS点击动态添加标签、删除指定标签的代码
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>
您可能感兴趣的文章:
- JS实现动态增加和删除li标签行的实例代码
- js确认删除对话框适用于a标签及submit
- JS对HTML标签select的获取、添加、删除操作
- [js]一个只删除所有font标签的正则函数
- JS给按钮添加跳转功能类似a标签
- javascript的document中的动态添加标签实现方法
- JavaScript动态添加css样式和script标签
- js 动态添加标签（新增一行，其实很简单，就是几个函数的应用）
相关推荐
-
JS对HTML标签select的获取、添加、删除操作
复制代码 代码如下: <SELECT NAME="aaa" SIZE="" style="width:200px" > <OPTION VALUE="">(空)</OPTION> <OPTION VALUE="1">1</OPTION> </SELECT> 复制代码 代码如下: //获得html控件 var select = docum
-
js 动态添加标签（新增一行，其实很简单，就是几个函数的应用）
复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" > <head> <title>add_line&
-
javascript的document中的动态添加标签实现方法
document的高级篇中提供了节点操作的函数,具体包括:获取节点,改变节点,删除节点,替换节点,创建节点,添加节点,克隆节点等函数.我们可以利用这些函数动态改变html的节点. 1.JavaScript <script type="text/javascript"> function test1(){//对个节点的ID相同时候的情况 var myhref = document.getElementById('same'); window.alert(myhref.inne
-
JavaScript动态添加css样式和script标签
[动态添加css样式] <html> <head> <script type="text/javascript"> window.onload=function(){ var head=document.getElementsByTagName('head')[0]; //获取到head元素 var link=document.createElement('link'); //创建link元素节点,也就是link标签 link.rel="s
-
js确认删除对话框适用于a标签及submit
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-
-
JS实现动态增加和删除li标签行的实例代码
如下所示: function addDepartment() { <span style="white-space:pre"> </span>var x = document.getElementById('department'); <span style="white-space:pre"> </span>var l = x.childNodes.length; <span style="white
-
[js]一个只删除所有font标签的正则函数
js 求一个只删除所有font 标签的正则函数 var a = "33asfdasdf22asdfasdf"; var b = a.replace(/]*>/gi,""); alert(b); [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]
-
JS给按钮添加跳转功能类似a标签
方法 window.location.href = "要跳转的URL"; 或 window.location = "要跳转的URL"; 或 location = "要跳转的URL"; 示例 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>给按钮添加跳转功能[类似a标签]</title&g
-
Vue.js动态添加、删除选题的实例代码
大家先看看页面效果吧,当当当当``````````````````````` 图中第二个选题是小颖点击了"新增选题"按钮,然后出来的,当你点击了"删除选项"或"删除选题"按钮,就会删除相应的选项和选题. html代码 <template> <div class="main-container"> <div class="form-horizontal"> <temp
-
原生JS和JQuery动态添加、删除表格行的方法
本文实例讲述了原生JS和JQuery动态添加.删除表格行的方法.分享给大家供大家参考.具体分析如下: 下面HTML代码作用:提交一个表单,将复选框的值提交(复选框的值等于后面的文本框,复选框和文本框处在同一行,可以动态添加和删除). 原生态JS版: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"
-
JS点击动态添加标签、删除指定标签的代码
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.createEle
-
jQuery添加和删除指定标签的方法
jQuery如何为指定标签添加和删除一个样式: 在网页的实际应用中,需要根据不同的条件来改变元素的CSS样式,通过动态的给元素添加删除一个CSS类可以实现此功能,下面通过实例来介绍一下如何实现此种功能. 一.使用addClass()和removeClass()添加和删除一个CSS类: 代码实例如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name=&q
-
使用js对select动态添加和删除OPTION示例代码
<select id="ddlResourceType" onchange="getvalue(this)"> </select> 动态删除select中的所有options: document.getElementById("ddlResourceType").options.length=0; 动态删除select中的某一项option: document.getElementById("ddlResourc
-
jQuery动态添加与删除tr行实例代码
这篇文章给大家分享的是一个用Jquery实现动态添加和删除tr行的小例子 下面是实现的样子,当然没有样式: 点击添加按钮可以添加一行: 点击删除可以删除本行: 基本功能是这样,下面是代码: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <!-- 这里是引用了一个百度的jquery库,可换为本地jquery
-
jQuery实现动态添加和删除input框实例代码
本文实例为大家分享了jQuery实现动态添加和删除input框的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>选项</title> <script type="text/javascript" src="js/jquery-1.8.3.js"></s
-
javascript对talbe进行动态添加、删除、验证实现代码
如下图所示: 源代码如下: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title
-
在Vue组件上动态添加和删除属性方法
如下所示: 在组件上添加属性 this.$set(this.data,"obj",value'); 删除属性this.$delete(this.data,"obj",value'); 以上这篇在Vue组件上动态添加和删除属性方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们. 您可能感兴趣的文章: Vue.js动态添加.删除选题的实例代码 详解Vue 动态添加模板的几种方法
-
JavaScript 高级篇之DOM文档,简单封装及调用、动态添加、删除样式（六）
http://www.cnblogs.com/TomXu/archive/2012/02/16/2351331.html , 在回来看这里文章,你一定会有更深刻的认识.因为我在这里介绍概念上的东西比较少,看下面的例子,对初学的朋友可能会有些吃力! 1.DOM的架构 复制代码 代码如下: <html> <head> <title>document</title> </head> <body> <h1>CSS Demo<