javaScript中createElement案例
2024-05-19 13:57:18
javaScript中createElement案例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>createElement案例,雪豹软件工作室</title>
<link rel="stylesheet" type="text/css" href="body.css">
<link rel="stylesheet" type="text/css" href="mark.css">
<style type="text/css">.testDiv {border-color: #8E388E;width: 800px;height: 300px;border-style: solid;border-width: 5px;background-color: #F0E68C;margin:0 auto;
}
</style>
<script type="text/javascript">var index = 0;//向div层中添加一个图片function addImg(){index++;var imgNode = document.createElement("img");//创建一个图片imgNode.src = "img/cry19.gif";//设置图片节点的src属性imgNode.title = "伤心表情图片" + index + "(单击我就可以删除我)";//设置图片节点的title属性imgNode.onclick = deleteMe; // 单击删除//imgNode.ondblclick = deleteMe; // 双击删除var divNode = document.getElementById("myDiv");divNode.appendChild(imgNode);//追加图片节点到div层中}//删除div层中的最后一个图片function deleteImg(){var divNode = document.getElementById("myDiv");divNode.removeChild(divNode.lastChild);//删除除div层中的最后一个图片}function $(id){var myNode = document.getElementById(id);//alert("myNode = " + myNode);return myNode;}function deleteMe(){//alert("*******" + $("myDiv").id + "***" + $("myDiv").className + "*******");//var divNode = document.getElementById("myDiv");//divNode.removeChild(this);/*event.srcElement指的是产生事件的元素(event是内置对象，也是事件对象,表示发生的某个事件,这里列举event的2个属性,其他的属性可查阅相关的文档说明，不做过多的列举keyCode:当前的按键编码srcElement:在哪个控件中产生的此事件)*///alert("deleteMe" + event.srcElement);//alert("deleteMe");/*以下2种写法都可以,使用this这种写法比较简单点*///event.srcElement.parentNode.removeChild(event.srcElement);/*这里有个疑问，this到底指的是谁?,不同的语境和不同场景场合，this代表的含义也可能不同，这部分我还没有去深究，有空在去研究，参考网页https://zhidao.baidu.com/question/683646917943611212.html和http://www.jb51.net/article/111049.htm(javascript中this在不同语境中代表不同的含义)*/alert("this = " + this + " / " + "event.srcElement =" + event.srcElement);/*this写在某个过程内，哪个控件调用次过程，this就表示哪个控件。this写在某个过程内，如果这个过程是动态生成的控件调用的，this表示此动态控件，如果是已有控件，this表示window。*/this.parentNode.removeChild(this);}function deleteMe2(myself){alert(myself + " / " + "当前对象的value = " + myself.value);}//添加超链接function addA(){var aNode = document.createElement("A");//创建A超链接节点aNode.href = "http://blog.csdn.net/czh500/article/details/51684483";aNode.title = "囧囧的csdn博客";aNode.target = "_blank";var myTextNode = document.createTextNode("我的csdn博客！");aNode.appendChild(myTextNode);var brNode = document.createElement("br");//创建br节点var br2Node = document.createElement("br");//创建br节点var divNode = document.getElementById("myDiv");divNode.appendChild(aNode);insertAfter(brNode, aNode);insertAfter(br2Node, brNode);}//功能: 在targetElement之后插入 新节点newElementfunction insertAfter(newElement, targetElement){var parent = targetElement.parentNode;if(parent.lastChild == targetElement){parent.appendChild(newElement);}else{parent.insertBefore(newElement,targetElement.nextSibling);}}</script></head>
<body>
<input type="button" value="添加图片到div层中" onclick="addImg()">
<input type="button" value="删除div层中的最后一个图片" onclick="deleteImg()">
<input type="button" value="使用this关键字删除me" onclick="deleteMe()">
<input type="button" value="使用this关键字" onclick="deleteMe2(this)">
<input type="button" value="添加超链接" onclick="addA()">
<br><br>
<div id="myDiv" class="testDiv"></div>
</body>
</html>
javaScript中createElement案例相关推荐
- JavaScript中开关灯案例展示
今天讲一个开关灯的案例,这里逻辑思维重点在于打标记法. 代码展示, 需求:点击关灯按钮,页面颜色变成黑色,同时按钮的关灯变成开灯,再次点击页面会变成黄色,按钮又变回关灯,可以自定义去设置: <s ...
- javascript案例_如何在JavaScript中使用增强现实-一个案例研究
javascript案例 by Apurav Chauhan 通过Apurav Chauhan 如何在JavaScript中使用增强现实-一个案例研究 (How to use Augmented Re ...
- JavaScript中的event讲解及一些常见案例
JavaScript中的event就是发生在dom元素上的事件,你也许已经使用过不少dom事件,但是event对象在js中有很多强大并且常用的功能.本文将讲解部分常用event的属性方法. 目录 ev ...
- JavaScript 中的设计模式
目录 1. 单例模式 2. 策略模式 3. 代理模式 4. 装饰者模式 5. 组合模式 6. 工厂模式 7. 访问者模式 8. 发布订阅模式 9. 观察者模式 10. 参考链接 设计模式(Design ...
- [JavaScript]关于JavaScript中DOM对象的使用
DOM对象是个好东西. 通过 HTML DOM,可以访问 JavaScript HTML 文档的所有元素. 当网页被加载时,浏览器会创建页面的文档对象模型(Document Object Model, ...
- JavaScript中事件回顾
事件其实在第一次学习JavaScript的时候就接触了,一行非常简单的代码 alert('Hello JavaScript!!!')就诠释了什么是事件.事件是什么呢?事件在基于浏览器编程的语言Java ...
- javaScript动画项目案例
javaScript动画项目案例 示例代码:我的github demo效果演示示例:我的demo网站 1.动画库编写 匀速运动 案例一 效果:匀速运动 <!DOCTYPE html> &l ...
- regexp 好汉字符串_如何在JavaScript中使用RegExp确认字符串的结尾
regexp 好汉字符串 by Catherine Vassant (aka Codingk8) 由凯瑟琳·瓦森(Catherine Vassant)(又名Codingk8) 如何在JavaScrip ...
- javascript优缺点_为什么要在JavaScript中使用静态类型？ 优缺点
javascript优缺点 by Preethi Kasireddy 通过Preethi Kasireddy 为什么要在JavaScript中使用静态类型? 优缺点 (Why use static t ...
最新文章
- Isolation Forest
- XenApp_XenDesktop_7.6实战篇之九：SQL Server数据库服务器规划及部署
- RabbitMQ 一二事(4) - 路由模式介绍
- C#进行Visio二次开发之Shape的Data1、Data2、Data3的用处
- mysql 5.6.34.rpm_离线安装mysql5.6及依赖_centos7离线安装mysql5.6.34
- 3线程同步：条件变量
- 兄弟3150cdn加粉后清零_兄弟MFC1618MFC1816 tn1035加粉清零方法
- 此时无足够的可用内存，无法满足操作的预期要求，可能是由于虚拟地址随便造成的。请稍候重试。 .
- C++类模板 简单示例
- ubuntu14.04源无法更新--jdk安装出错解决方法
- [纪事]再见，CodeArtist
- AE intersect、clip的实现
- word下载哪一个比较好
- oracle 将钱转换万元单位,oracle 金额单位转换
- Anton and Chess
- Power BI可视化技巧：正负值配色
- 第三章 区块链进阶 [18]
- 条件if语句的多种写法
- Windows 反消息钩子（1）
- ActiveMQ连接数过多，导致ActiveMQ无法正常接入数据