基于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 相关文章推荐
利用jQuery插件扩展识别浏览器内核与外壳的类型和版本的实现代码
Oct 22 Javascript
如何让easyui gridview 宽度自适应窗口改变及fitColumns应用
Jan 25 Javascript
js前台分页显示后端JAVA数据响应
Mar 18 Javascript
js用拖动滑块来控制图片大小的方法
Feb 27 Javascript
详解JavaScript中循环控制语句的用法
Jun 03 Javascript
javascript每日必学之多态
Feb 23 Javascript
JavaScript中各种引用类型的常用操作方法小结
May 05 Javascript
JavaScript严格模式下关于this的几种指向详解
Jul 12 Javascript
微信小程序promsie.all和promise顺序执行
Oct 27 Javascript
JavaScript笛卡尔积超简单实现算法示例
Jul 30 Javascript
vue之延时刷新实例
Nov 14 Javascript
JavaScript实现简单动态表格
Dec 02 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日历[测试通过]
2008/03/27 PHP
php遍历数组的方法分享
2012/03/22 PHP
php引用传值实例详解学习
2013/11/06 PHP
Laravel 5框架学习之路由、控制器和视图简介
2015/04/07 PHP
php中10个不同等级压缩优化图片操作示例
2016/11/14 PHP
浅谈PHP封装CURL
2019/03/06 PHP
Javascript写了一个清除“logo1_.exe”的杀毒工具(可扫描目录)
2007/02/09 Javascript
jQuery 浮动广告实现代码
2008/12/25 Javascript
JSON扫盲帖 JSON.as类教程
2009/02/16 Javascript
JavaScript DOM学习第八章 表单错误提示
2010/02/19 Javascript
js 父窗口控制子窗口的行为-打开,关闭,重定位,回复
2010/04/20 Javascript
JS特权方法定义作用以及与公有方法的区别
2013/03/18 Javascript
node.js中的http.request.end方法使用说明
2014/12/10 Javascript
JS解决iframe之间通信和自适应高度的问题
2016/08/24 Javascript
简单实现bootstrap选项卡效果
2017/02/08 Javascript
Vue修改mint-ui默认样式的方法
2018/02/03 Javascript
[02:38]2018年度DOTA2最佳劣单位选手-完美盛典
2018/12/17 DOTA
在Python中进行自动化单元测试的教程
2015/04/15 Python
常用python编程模板汇总
2016/02/12 Python
pycharm配置git(图文教程)
2019/08/16 Python
Python @property使用方法解析
2019/09/17 Python
Python中zip()函数的解释和可视化(实例详解)
2020/02/16 Python
pycharm第三方库安装失败的问题及解决经验分享
2020/05/09 Python
python利用递归方法实现求集合的幂集
2020/09/07 Python
美津浓巴西官方网站:Mizuno巴西
2019/07/24 全球购物
JDO的含义
2012/11/17 面试题
监理员的岗位职责
2013/11/13 职场文书
文秘应聘自荐书范文
2014/02/18 职场文书
向领导表决心的话
2014/03/11 职场文书
新疆民族团结演讲稿
2014/08/27 职场文书
农村党支部书记党群众路线四风问题整改措施
2014/09/26 职场文书
四风批评与自我批评范文
2014/10/14 职场文书
房屋产权共有协议书范本
2014/11/03 职场文书
2014幼儿园保育员工作总结
2014/11/10 职场文书
幼儿园教师教育随笔
2015/08/14 职场文书
Java实现扫雷游戏详细代码讲解
2022/05/25 Java/Android