动态的创建一个元素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 相关文章推荐
弹出广告特效代码(一个IP只弹出一次)
May 11 Javascript
JavaScript 判断浏览器类型及版本
Feb 21 Javascript
JavaScript 利用Cookie记录用户登录信息
Dec 08 Javascript
查看大图功能代码jquery版
Nov 05 Javascript
基于bootstrap插件实现autocomplete自动完成表单
May 07 Javascript
Three.js学习之Lamber材质和Phong材质
Aug 04 Javascript
JS中使用new Date(str)创建时间对象不兼容firefox和ie的解决方法(两种)
Dec 14 Javascript
js实现仿购物车加减效果
Mar 01 Javascript
Angular 4环境准备与Angular cli创建项目详解
May 27 Javascript
微信小程序实现的日期午别医生排班表功能示例
Jan 09 Javascript
element-ui组件table实现自定义筛选功能的示例代码
Mar 15 Javascript
解决Layui当中的导航条动态添加后渲染失败的问题
Sep 25 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读取txt文本文件并分页显示的方法
2015/03/11 PHP
PHP打印输出函数汇总
2016/08/28 PHP
记录一次排查PHP脚本执行卡住的问题
2016/12/27 PHP
详解Yii2.0使用AR联表查询实例
2017/06/16 PHP
js将iframe中控件的值传到主页面控件中的实现方法
2013/03/11 Javascript
浅析JavaScript中的事件机制
2015/06/04 Javascript
跟我学习javascript的异步脚本加载
2015/11/20 Javascript
使用vue.js制作分页组件
2016/06/27 Javascript
AngularJS表达式讲解及示例代码
2016/08/16 Javascript
node.js学习之base64编码解码
2016/10/21 Javascript
AngularJs实现聊天列表实时刷新功能
2017/06/15 Javascript
javascript如何用递归写一个简单的树形结构示例
2017/09/06 Javascript
使用Vue实现图片上传的三种方式
2018/07/17 Javascript
浅谈VUE单页应用首屏加载速度优化方案
2018/08/28 Javascript
详解在网页上通过JS实现文本的语音朗读
2019/03/28 Javascript
Vue开发之封装上传文件组件与用法示例
2019/04/25 Javascript
react实现antd线上主题动态切换功能
2019/08/12 Javascript
JS实现利用闭包判断Dom元素和滚动条的方向示例
2019/08/26 Javascript
解决LayUI加上form.render()下拉框和单选以及复选框不出来的问题
2019/09/27 Javascript
[44:39]2014 DOTA2国际邀请赛中国区预选赛 NE VS CNB
2014/05/21 DOTA
[00:12]DAC2018 no[o]ne亮相SOLO赛 他是否如他的id一样无人可挡?
2018/04/06 DOTA
Python中的闭包实例详解
2014/08/29 Python
对python中字典keys,values,items的使用详解
2019/02/03 Python
Python 操作 ElasticSearch的完整代码
2019/08/04 Python
树莓派安装OpenCV3完整过程的实现
2019/10/10 Python
Pytorch之Variable的用法
2019/12/31 Python
keras 使用Lambda 快速新建层 添加多个参数操作
2020/06/10 Python
python 中的9个实用技巧,助你提高开发效率
2020/08/30 Python
Python中return函数返回值实例用法
2020/11/19 Python
商场消防管理制度
2014/01/12 职场文书
打架检讨书100字
2014/01/19 职场文书
亮剑观后感500字
2015/06/05 职场文书
大学生安全教育主题班会
2015/08/12 职场文书
导游词之安徽九华山
2019/09/18 职场文书
Python+OpenCV实现图片中的圆形检测
2022/04/07 Python
HTML 里 img 元素的 src 和 srcset 属性的区别详解
2023/05/21 HTML / CSS