JS小Demo: 点击Body 创建DIV, 点击DIV删除

最新推荐文章于 2022-07-18 09:33:34 发布
最新推荐文章于 2022-07-18 09:33:34 发布
阅读量362 收藏
点赞数
分类专栏： Javascript 文章标签： Javascript DOM操作 ViewUI
给小朋友做的演示
三个兼容主流浏览器的公共方法
addEvent
removeEvent
stopEventPropagation 


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "  http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<style type="text/css">
body{padding:0px;margin:0px;color:green;font-weight:bold;text-align: center;font-size:40px;}
div{ height:100px;width:100px;background:red;margin:5px 5px;float:left;_display:inline;}
</style>
<script type="text/javascript">
var index = 0;
function createDiv(){
	var div = document.createElement("div");
	var divData = document.createTextNode("");
	divData.nodeValue = index ++;
	div.appendChild(divData);
	
	addEvent(div, "click", function(e){
		document.body.removeChild(div);
		stopEventPropagation(e || event);
	});
	
	document.body.appendChild(div);
}

addEvent(document, 'click', createDiv);

function addEvent(elem, eventName, handler) {
　　if (elem.attachEvent) {
　　　　elem.attachEvent("on" + eventName, function(){
　　　　　　　　　　　　　　　　　　　　handler.call(elem)});
　　} else if (elem.addEventListener) {
　　　　elem.addEventListener(eventName, handler, false);
　　}
}
function removeEvent(elem, eventName, handler) {
　　if (elem.detachEvent) {
　　　　elem.detachEvent("on" + eventName, function(){
　　　　　　　　　　　　　　　　　　　　handler.call(elem)});
　　} else if (elem.removeEventListener) {
　　　　elem.removeEventListener(eventName, handler, false);
　　}
}
function stopEventPropagation(e){
	if(e.stopPropagation){
		e.stopPropagation();
	}else{
		e.cancelBubble=true;
	}
}
</script>
</head>
<body>
</body>
</html>
 
效果:


 
nanquan
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
easy-div:网页中使用的一个方便的 div 元素
06-22
简单的div 该模块为您的演示和原型启动和运行提供了一个非常简单的 div 元素。 非常适合与 Beefy 一起使用。 例子 var easyDiv = require ( 'easy-div' ) ; var div = easyDiv ( { onResize : function ( width , height ) { this . innerHTML = 'Window Size: ' + width + 'x' + height ; } , onReady : function ( ) { console . log ( 'DOM Loaded' ) ; } } , document . body ) ; 请参阅demo/demo.js了解更多用
JavaScript利用键盘码控制div移动
11-21
前言 在生活中肯定有玩过贪吃蛇的游戏，那么要怎么样用键盘码来实现div的移动呢？下面就分享一个Demo。 利用键盘码来控制div移动源码 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> #box { height: 100px; width: 100px; background-color: red; position: absolute; } </style> </head> <body> <!--keyCode 键盘码
创建标签、添加元素、删除元素
CHENww_的博客
10-24 243
一、创建元素（createElement） HTML元素经常包含文本。创建指定文本的按钮你需要在按钮元素后添加文本节点: <div class="box"> <h3>标题文本</h3> <p>正文文本</p> <input type="text" id="userName" name="userName"> <input type="button" value=
原生js怎么删除一个 div
热门推荐
风云无忌的博客
05-17 2万+
增加删除DIV的JS写法 111 222 var box = document.getElementById("box"); var main = document.getElementById("main"); var newMask = document.createElement("div"); newMask.id ="newMask"; main.append
JavaScript：js删除dom节点或div的2种常见方式，附例子和运行效果
一火的专栏
12-21 1万+
js删除dom节点或div的2种常见方式 1.删除当前节点 <script> function del(divId){ document.getElementById(divId).remove(); } </script> 完整代码如下： <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml" > <head> <title>deldom</...
【HTML DOM】关于直接删改操作body标签中子元素的问题
weixin_45602529的博客
08-30 1082
在想要删除<body>中直接的一级父元素时，给body标签添加id名并进行如下操作： <...> <body id="body"> <div id="div1"> </div> <script> var test=document.getElementById("body"); var child=document.getElementByid("div1"); body.removeChild(child); </scrip
添加、删除元素
>>向着CTO前进>>
07-27 579
1、如何动态的创建html元素 1.动态的添加到document文档中 基本步骤： 1）       创建元素(createElement) 2）       给新的元素添加必要的信息 3） 将元素添加到指定的位置（appendChild），比如div body function test(){ //创建元素 //写希望创建的元素的标签名字 varmyElement=docu
判断可拖动div是否重合 重合多少
12-09
body{margin:0px; padding:0px; font-size:12px} .div{height:160px;width:160px;position:absolute; text-align:center; } .demo1{ border:1px solid #96C2F1;background-color:#EFF7FF;left:150px;top:20px} .demo...
CSS实现DIV居中的三种方法
12-13
下面给大家分享div居中的实现代码，具体代码如下所示： <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>demo</title> </head> <body> <...
bootstrap jQuery点击打开浮动确认框代码.zip
07-11
link rel="stylesheet" type="text/css" href="css/demo.css?3.1.64"> </head> <body>[removed][removed] <div class="container" 0;"> <div class="page-header"> <h1>PopConfirm 演示 ...
js动态创建div等元素实例
03-19
js动态创建div等元素实例.动态创建div，子元素，select下拉框，单选按钮。等待
DOM之元素的 创建+添加+删除+克隆
weixin_47075145的博客
07-18 2339
方式2利用innerHTML创建元素（不推荐用）innerHTML属性值不运行时，当作字符串，运行时当作js代码。
HTML DOM中添加事件方法（详解）
qq_59463562的博客
06-14 3569
简单必学的HTML事件方法
JavaScript创建、添加、删除元素
僵小蛋的博客
08-09 1392
（1）createElement("元素名")：此方法可以创建一个新的元素。例如：createElement("p") ，表示创建了一个p标签（元素/段落）。 （2）createTextNode("文本内容")：此方法可以创建一个文本节点。例如：createTextNode("我是新的内容")，表示创建了一个值为“我是新的内容”的文本节点。 （3）appendChild("元素名称")：添加一
webday03-DOM-节点的增删改查
weixin_47407295的博客
08-23 141
<!DOCTYPE HTML> <html> <head> <title>节点的增删改查</title> <meta http-equiv="Content-type" content="text/html; charset=UTF-8" /> <!--加入样式表--> <style type="text/css"> ...
创建，添加，插入和删除DOM元素
小芳
07-30 1517
创建DOM元素：createElement("节点");
JS动态移除div
qq_42583562的博客
01-23 8679
在写这个函数时出现了很多问题，使用下面这种写法时发现只有第一次的移除是准确的，后面会移除第i-1个盒子。 function remove(){ var yes = document.getElementsByClassName('yes'); var body = document.getElementById('body'); var num = body.children...
13javascript添加删除div,对象的方法
小飞虫
07-09 577
看例子： www.phperz.com php程序员站  //删除一个元素或是div function deldiv(divid){ var div=document.getElementById(divid); div.parentNode.removeChild(div); } //添加一个div function adddiv(divid){ v
js通过按钮新增div和删除div
Limy-离人怎挽
08-22 2200
1:html示例 <body> <div class="container-fluid"> <form id="addForm" class="form-horizontal"> <div class="form-group1"> <button onclick="addTr()" type="b...
使用事件捕获来处理点击事件，完整demo
最新发布
07-15
当您使用事件捕获来处理点击事件时，可以按照以下步骤创建一个完整的示例： HTML部分： ```html <!DOCTYPE html> 事件捕获示例 <body> <div id="outer"> <div id="inner"> 点击此处 </div> </div> ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值