HTML5清除小圆点的代码,JS点击动态添加标签、删除指定标签的代码

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

发布时间：2020-08-29 03:53:04

来源：脚本之家

阅读：284

作者：mrr

1.div标签

1

添加

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

}

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

删除

1

2

3

4

5

function myFun10(){

var parent=document.getElementById("mDiv4");

var son=document.getElementById("p1");

parent.removeChild(son);

}

补充：

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

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

Document

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;

}

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

var span = document.createElement("span");

span.innerHTML = i+1;

circle.appendChild(span);

}

$("scroll").appendChild(circle);

var spanChildren = circle.children;

spanChildren[0].setAttribute("class","current");

}

• 
• 
• 
• 
• 
•