动态的创建一个元素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 相关文章推荐
javascript 数组排序函数
Aug 20 Javascript
举例简介AngularJS的内部语言环境
Jun 17 Javascript
Ajax清除浏览器js、css、图片缓存的方法
Aug 06 Javascript
Node.js的Express框架使用上手指南
Mar 12 Javascript
JS学习之表格的排序简单实例
May 16 Javascript
关于Javascript中defer和async的区别总结
Sep 20 Javascript
JavaScript实现图像模糊化的方法实例
Jan 15 Javascript
vue.js树形组件之删除双击增加分支实例代码
Feb 28 Javascript
Vue.js项目部署到服务器的详细步骤
Jul 17 Javascript
vue 监听窗口变化对页面部分元素重新渲染操作
Jul 28 Javascript
Nuxt 嵌套路由nuxt-child组件用法(父子页面组件的传值)
Nov 05 Javascript
用vite搭建vue3应用的实现方法
Feb 22 Vue.js
动态的绑定事件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非阻塞模式
2016/03/03 PHP
php7安装yar扩展的方法详解
2017/08/03 PHP
PHP中md5()函数的用法讲解
2019/03/30 PHP
laravel 去掉index.php伪静态的操作方法
2019/10/12 PHP
为javascript添加String.Format方法
2020/08/11 Javascript
jQuery(js)获取文字宽度(显示长度)示例代码
2013/12/31 Javascript
jQuery ui autocomplete选择列表被Bootstrap模态窗遮挡的完美解决方法
2016/09/23 Javascript
JavaScript生成验证码并实现验证功能
2016/09/24 Javascript
jQuery点击导航栏选中更换样式的实现代码
2017/01/23 Javascript
js实现适合新闻类图片的轮播效果
2017/02/05 Javascript
jquery 仿锚点跳转到页面指定位置的实例
2017/02/14 Javascript
Nodejs读取文件时相对路径的正确写法(使用fs模块)
2017/04/27 NodeJs
Angularjs cookie 操作实例详解
2017/09/27 Javascript
React Native 真机断点调试+跨域资源加载出错问题的解决方法
2018/01/18 Javascript
swiper 解决动态加载数据滑动失效的问题
2018/02/26 Javascript
vue-router 源码之实现一个简单的 vue-router
2018/07/02 Javascript
解决vue v-for 遍历循环时key值报错的问题
2018/09/06 Javascript
浅谈angularJs函数的使用方法(大小写转换,拷贝,扩充对象)
2018/10/08 Javascript
ES6知识点整理之对象解构赋值应用示例
2019/04/17 Javascript
vue中axios实现数据交互与跨域问题
2019/05/12 Javascript
vue项目前端知识点整理【收藏】
2019/05/13 Javascript
Nodejs + sequelize 实现增删改查操作
2020/11/07 NodeJs
Django项目中包含多个应用时对url的配置方法
2018/05/30 Python
Python实现的从右到左字符串替换方法示例
2018/07/06 Python
完美解决Python matplotlib绘图时汉字显示不正常的问题
2019/01/29 Python
Python----数据预处理代码实例
2019/03/20 Python
python 执行终端/控制台命令的例子
2019/07/12 Python
浅谈selenium如何应对网页内容需要鼠标滚动加载的问题
2020/03/14 Python
Pycharm插件(Grep Console)自定义规则输出颜色日志的方法
2020/05/27 Python
python初步实现word2vec操作
2020/06/09 Python
h5调用摄像头的实现方法
2016/06/01 HTML / CSS
马来西亚太阳镜、眼镜和隐形眼镜网上商店:Focus Point
2018/12/13 全球购物
Guess欧洲官网:美国服饰品牌
2019/08/06 全球购物
应届生简历自我评价
2015/03/11 职场文书
浅析MySQL如何实现事务隔离
2021/06/26 MySQL
电脑关机速度很慢怎么办 提升电脑关机速度设置教程
2022/04/08 数码科技