基于dom编程中 动态创建与删除元素的使用


Posted in Javascript onApril 17, 2013
<html>
<head>
<script type="text/javascript">
    function test(){        
        //createElement()  创建一个指定标签名的元素[比如:动态创建超链接]
        var createa=document.createElement("a");
        createa.id="a1";
        createa.innerText="连接到百度";
        createa.href="http://www.baidu.com";
        //createa.color="green" ////添加颜色(不要忘记style属性,不然没有效果)
        createa.style.color="green"
        //添加默认位置--body 并且添加子节点
        //document.body.appendChild(createa);
        //放置指定位置
        document.getElementById("div1").appendChild(createa);
    }    function test2(){
        //指定位置删除节点removeChild()
        document.getElementById("div1").removeChild(document.getElementById("a1")); //id 名重复 js只取第一个
    }
</script>
</head>
<body>
<!--动态创建元素-->
<input type="button" value="创建一个a标签" onclick="test()"/><br/>
<input type="button" value="删除创建一个a标签" onclick="test2()"/>
<div id="div1" style="width:400px;height:300px;border:1px solid silver">
</div>
</body>
</html>

<html>
<head>
<script type="text/javascript">
    function test(){        
        //createElement()  创建一个指定标签名的元素[比如:动态创建超链接]
        var createa=document.createElement("a");
        createa.id="a1";
        createa.innerText="连接到百度";
        createa.href="http://www.baidu.com";
        //createa.color="green" ////添加颜色(不要忘记style属性,不然没有效果)
        createa.style.color="green"
        //添加默认位置--body 并且添加子节点
        //document.body.appendChild(createa);
        //放置指定位置
        $("div1").appendChild(createa);
    }    function test2(){
        //指定位置删除节点removeChild()
        $("div1").removeChild($("a1"));
    }

//定义一个函数 返回给定id的对象
    function $(id){
        return document.getElementById(id);
    }
</script>
</head>
<body>
<!--动态创建元素-->
<input type="button" value="创建一个a标签" onclick="test()"/><br/>
<input type="button" value="删除创建一个a标签" onclick="test2()"/>
<div id="div1" style="width:400px;height:300px;border:1px solid silver">
</div>
</body>
</html>

Javascript 相关文章推荐
JavaScript this 深入理解
Jul 30 Javascript
最佳6款用于移动网站开发的jQuery 图片滑块插件小结
Jul 20 Javascript
模拟电子签章盖章效果的jQuery插件源码
Jun 24 Javascript
z-blog SyntaxHighlighter 长代码无法换行解决办法(jquery)
Nov 16 Javascript
javascript实现输出指定行数正方形图案的方法
Aug 03 Javascript
js 动态给元素添加、移除事件的实现方法
Jul 19 Javascript
自定义require函数让浏览器按需加载Js文件
Nov 24 Javascript
通过sails和阿里大于实现短信验证
Jan 04 Javascript
JS正则截取两个字符串之间及字符串前后内容的方法
Jan 06 Javascript
提高Node.js性能的应用技巧分享
Aug 10 Javascript
JS实现分页浏览横向图片(类轮播)实例代码
Nov 06 Javascript
10分钟彻底搞懂Http的强制缓存和协商缓存(小结)
Aug 30 Javascript
javaScript(JS)替换节点实现思路介绍
Apr 17 #Javascript
用函数模板,写一个简单高效的 JSON 查询器的方法介绍
Apr 17 #Javascript
JS对img进行操作(换图片/切图/轮换/停止)
Apr 17 #Javascript
用显卡加速,轻松把笔记本打造成取暖器的办法!
Apr 17 #Javascript
js跑马灯代码(自写)
Apr 17 #Javascript
获取元素距离浏览器周边的位置的方法getBoundingClientRect
Apr 17 #Javascript
动态加载js和css(外部文件)
Apr 17 #Javascript
You might like
实现PHP框架系列文章(6)mysql数据库方法
2016/03/04 PHP
PHP模板引擎Smarty内置变量调解器用法详解
2016/04/11 PHP
PHP读取大文件末尾N行的高效方法推荐
2016/06/03 PHP
验证token、回复图文\文本、推送消息的实用微信类php代码
2016/06/28 PHP
Smarty3配置及入门语法
2017/02/22 PHP
PHP实现的杨辉三角求解算法分析
2019/03/11 PHP
一个js封装的不错的选项卡效果代码
2008/02/15 Javascript
JS代码同步文本框内容的实例方法
2013/07/12 Javascript
js实现简洁的TAB滑动门效果代码
2015/09/06 Javascript
javascript实现base64 md5 sha1 密码加密
2015/09/09 Javascript
JavaScript编写简单的计算器
2015/11/25 Javascript
在JavaScript中模拟类(class)及类的继承关系
2016/05/20 Javascript
JS中的Replace()传入函数时的用法详解
2017/09/11 Javascript
对vux点击事件的优化详解
2018/08/28 Javascript
详解ES6系列之私有变量的实现
2018/11/21 Javascript
express启用https使用小记
2019/05/21 Javascript
浅谈vue 多个变量同时赋相同值互相影响
2020/08/05 Javascript
微信小程序自定义tabBar的踩坑实践记录
2020/11/06 Javascript
[03:27]最受玩家喜爱奖提名:PZH_Element 致玩家寄语
2016/12/20 DOTA
深入解析Python中函数的参数与作用域
2016/03/20 Python
pandas 使用apply同时处理两列数据的方法
2018/04/20 Python
python3爬虫获取html内容及各属性值的方法
2018/12/17 Python
解决pyqt5异常退出无提示信息的问题
2020/04/08 Python
keras topN显示,自编写代码案例
2020/07/03 Python
PyQt5的相对布局管理的实现
2020/08/07 Python
HTML5中通过li-canvas轻松实现单图、多图、圆角图绘制,单行文字、多行文字等
2018/11/30 HTML / CSS
详解HTML5 canvas绘图基本使用方法
2018/01/29 HTML / CSS
Shopping happy life西班牙:以最优惠的价格提供最好的时尚配饰
2020/03/13 全球购物
机电一体化自荐信
2013/12/10 职场文书
后备干部考察材料
2014/02/12 职场文书
老兵退伍标语
2014/10/07 职场文书
项目合作意向书
2015/05/08 职场文书
婚礼家长致辞
2015/07/27 职场文书
幼儿园教师教育随笔
2015/08/14 职场文书
浅谈MySQL之浅入深出页原理
2021/06/23 MySQL
MySQL索引失效场景及解决方案
2022/07/23 MySQL