动态的创建一个元素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 相关文章推荐
判断多个元素(RADIO,CHECKBOX等)是否被选择的原理说明
Feb 18 Javascript
JS对象与json字符串格式转换实例
Oct 28 Javascript
jQuery实现瀑布流布局详解(PC和移动端)
Sep 01 Javascript
javascript数组遍历的方法实例分析
Sep 13 Javascript
详解JavaScript常量定义
Jan 03 Javascript
详解PHP中pathinfo()函数导致的安全问题
Jan 05 Javascript
vue2.0使用Sortable.js实现的拖拽功能示例
Feb 21 Javascript
js调用刷新界面的几种方式
May 03 Javascript
JavaScript this绑定过程深入详解
Dec 07 Javascript
JS中类的静态方法,静态变量,实例方法,实例变量区别与用法实例分析
Mar 14 Javascript
Element Dropdown下拉菜单的使用方法
Jul 26 Javascript
在vue中配置不同的代理同时访问不同的后台操作
Sep 11 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
PHP7 新特性详细介绍
2016/09/06 PHP
php命令行写shell实例详解
2018/07/19 PHP
jsp js鼠标移动到指定区域显示选项卡离开时隐藏示例
2013/06/14 Javascript
使用js声明数组,对象在jsp页面中(获得ajax得到json数据)
2013/11/05 Javascript
如何实现JavaScript动态加载CSS和JS文件
2020/12/28 Javascript
js判断手机访问或者PC的几个例子(常用于手机跳转)
2015/12/15 Javascript
jQuery控制li上下循环滚动插件用法实例(附demo源码下载)
2016/05/28 Javascript
HTML5+Canvas调用手机拍照功能实现图片上传(下)
2017/04/21 Javascript
AngularJS实用基础知识_入门必备篇(推荐)
2017/07/10 Javascript
老生常谈js数据类型
2017/08/03 Javascript
vue实现form表单与table表格的数据关联功能示例
2019/01/29 Javascript
详解vue-cli 脚手架 安装
2019/04/16 Javascript
分享JS表单验证源码(带错误提示及密码等级)
2020/01/05 Javascript
Node.js API详解之 module模块用法实例分析
2020/05/13 Javascript
vue 项目软键盘回车触发搜索事件
2020/09/09 Javascript
[43:49]LGD vs CHAOS 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/16 DOTA
python使用marshal模块序列化实例
2014/09/25 Python
python中的split()函数和os.path.split()函数使用详解
2019/12/21 Python
python requests模拟登陆github的实现方法
2019/12/26 Python
Tensorflow 使用pb文件保存(恢复)模型计算图和参数实例详解
2020/02/11 Python
想学画画?python满足你!
2020/12/24 Python
使用CSS3的背景渐变Text Gradient 创建文字颜色渐变
2014/08/19 HTML / CSS
html5开发之viewport使用
2013/10/17 HTML / CSS
印尼在线旅游门户网站:NusaTrip
2019/11/01 全球购物
兰蔻俄罗斯官方网站:Lancome俄罗斯
2019/12/09 全球购物
越南母婴用品购物网站:Kids Plaza
2020/04/09 全球购物
学生党员的自我评价范文
2014/03/01 职场文书
法人授权委托书范本
2014/04/04 职场文书
考核评语大全
2014/04/29 职场文书
幼儿教师自我剖析材料
2014/09/29 职场文书
电子商务实训报告总结
2014/11/05 职场文书
纪录片信仰观后感
2015/06/08 职场文书
国庆节新闻稿
2015/07/17 职场文书
《鸟的天堂》教学反思
2016/02/19 职场文书
JavaGUI模仿QQ聊天功能完整版
2021/07/04 Java/Android
python 远程执行命令的详细代码
2022/02/15 Python