动态的创建一个元素createElement及删除一个元素


Posted in Javascript onJanuary 24, 2014
<html> 
<script language = "javascript" type = "text/javascript"> 
function test(){ 
//创建元素 
var myElement = document.createElement("a");//a是想创建的html元素标签名 
//给创建的元素添加必要的信息 
myElement.href = "http://www.baidu.com"; 
myElement.innerText = "连接到百度"; 
myElement.id = "id1"; 
//myElement.style.top = "300px"; 
//myElement.style.left = "500px"; 
//myElement.style.position = "absolute"; 
//把创建的元素添加到body 对象上 
//document.body.appendChild(myElement); 
//将元素添加到div 
document.getElementById("div1").appendChild(myElement); 
} 
function test2(){ 
//删除一个元素 
//也可以通过属性获得新增元素的父元素 
//document.getElementById("id1").parentNode 
document.getElementById("div1").removeChild(document.getElementById("id1")); 
} 
</script> 
<body> 
<input type = "button" onclick = "test()" value = "动态的创建一个超链接"/> 
<input type = "button" onclick = "test2()" value = "动态的删除添加的元素"/> 
<div id = "div1" style = "width:200px;height:300px;border:1px solid red"> 
div1 
</div> 
</body> 
</html>

动态的创建一个元素createElement及删除一个元素
Javascript 相关文章推荐
浅析XMLHttpRequest的缓存问题
Dec 13 Javascript
JS冒泡事件的快速解决方法
Dec 16 Javascript
javascript使用输出语句实现网页特效代码
Aug 06 Javascript
基于jQuery实现美观且实用的倒计时实例代码
Dec 30 Javascript
获取阴历(农历)和当前日期的js代码
Feb 15 Javascript
js实现仿购物车加减效果
Mar 01 Javascript
浅谈vue项目重构技术要点和总结
Jan 23 Javascript
jquery.pager.js分页实现详解
Jul 29 jQuery
JS桶排序的简单理解与实现方法示例
Nov 25 Javascript
如何用vue-cli3脚手架搭建一个基于ts的基础脚手架的方法
Dec 12 Javascript
jQuery实现点击滚动到指定元素上的方法分析
Mar 19 jQuery
如何检测JavaScript中的死循环示例详解
Aug 30 Javascript
动态的绑定事件addEventListener方法的使用
Jan 24 #Javascript
js监听滚动条滚动事件使得某个标签内容始终位于同一位置
Jan 24 #Javascript
js利用事件的阻止冒泡实现点击空白模态框的隐藏
Jan 24 #Javascript
JS实现点击链接取消跳转效果的方法
Jan 24 #Javascript
js关于字符长度限制的问题示例探讨
Jan 24 #Javascript
JS方法调用括号的问题探讨
Jan 24 #Javascript
Array栈方法和队列方法的特点说明
Jan 24 #Javascript
You might like
PHP使用feof()函数读文件的方法
2014/11/07 PHP
yii gridview实现时间段筛选功能
2017/08/15 PHP
jquery 模拟雅虎首页的点击对话框效果
2010/04/11 Javascript
javascript 弹出窗口中是否显示地址栏的实现代码
2011/04/14 Javascript
js实时监听文本框状态的方法
2011/04/26 Javascript
解析JavaScript中instanceof对于不同的构造器或许都返回true
2013/12/03 Javascript
PHP+jQuery+Ajax+Mysql如何实现发表心情功能
2015/08/06 Javascript
js图片轮播特效代码分享
2015/09/07 Javascript
javascript实现的登陆遮罩效果汇总
2015/11/09 Javascript
非常酷炫的Bootstrap图片轮播动画
2016/05/27 Javascript
Vue实现双向绑定的方法
2016/12/22 Javascript
angular仿支付宝密码框输入效果
2017/03/25 Javascript
Vue按需加载的具体实现
2017/12/02 Javascript
angular2实现统一的http请求头方法
2018/08/13 Javascript
JavaScript实现的级联算法示例【省市二级联动功能】
2018/12/25 Javascript
ES6 class的应用实例分析
2019/06/27 Javascript
Vuex实现数据共享的方法
2019/12/20 Javascript
javascript设计模式 ? 命令模式原理与用法实例分析
2020/04/20 Javascript
Vue-cli assets SubDirectory及PublicPath区别详解
2020/08/18 Javascript
vue-cli3访问public文件夹静态资源报错的解决方式
2020/09/02 Javascript
微信小程序实现倒计时功能
2020/11/19 Javascript
vue 数据操作相关总结
2020/12/17 Vue.js
Vue实现简易购物车页面
2020/12/30 Vue.js
用Python输出一个杨辉三角的例子
2014/06/13 Python
Python中pow()和math.pow()函数用法示例
2018/02/11 Python
Django实现登录随机验证码的示例代码
2018/06/20 Python
5款Python程序员高频使用开发工具推荐
2019/04/10 Python
关于python pycharm中输出的内容不全的解决办法
2020/01/10 Python
为什么黑客都用python(123个黑客必备的Python工具)
2020/01/31 Python
Canvas环形饼图与手势控制的实现代码
2019/11/08 HTML / CSS
新加坡第一的杂货零售商:NTUC FairPrice
2020/12/05 全球购物
优秀少先队辅导员事迹材料
2014/12/24 职场文书
2015年感恩父亲节演讲稿
2015/03/19 职场文书
车间统计员岗位职责
2015/04/14 职场文书
安全教育日主题班会
2015/08/13 职场文书
mysql使用instr达到in(字符串)的效果
2022/04/03 MySQL