基于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 相关文章推荐
在第一个input框内输入内容.textarea自动得到第一个文件框的值的javascript代码
Apr 20 Javascript
YUI 读码日记之 YAHOO.lang.is*
Mar 22 Javascript
使用JavaScript库还是自己写代码?
Jan 28 Javascript
基于Jquery+Ajax+Json的高效分页实现代码
Oct 29 Javascript
使用原生js实现页面蒙灰(mask)效果示例代码
Jun 20 Javascript
AngularJS 使用 UI Router 实现表单向导
Jan 29 Javascript
angular.js之路由的选择方法
Sep 24 Javascript
最常见的左侧分类菜单栏jQuery实现代码
Nov 28 Javascript
浅谈Vue.js路由管理器 Vue Router
Aug 16 Javascript
vue vantUI tab切换时 list组件不触发load事件的问题及解决方法
Feb 14 Javascript
在vue中axios设置timeout超时的操作
Sep 04 Javascript
详解Vue的异步更新实现原理
Dec 22 Vue.js
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
sourcesafe管理phpproj文件的补充说明(downmoon)
2009/04/11 PHP
解析如何屏蔽php中的phpinfo()函数
2013/06/06 PHP
php算法实例分享
2015/07/14 PHP
简单实用的PHP文本缓存类实例
2019/03/22 PHP
yii2.0框架使用 beforeAction 防非法登陆的方法分析
2019/09/11 PHP
ExtJs中简单的登录界面制作方法
2010/08/19 Javascript
什么是DOM(Document Object Model)文档对象模型
2012/03/05 Javascript
JS中创建函数的三种方式及区别
2016/03/13 Javascript
jQuery自制提示框tooltip改进版
2016/08/01 Javascript
详解XMLHttpRequest(二)响应属性、二进制数据、监测上传下载进度
2016/09/14 Javascript
通过AngularJS实现图片上传及缩略图展示示例
2017/01/03 Javascript
基于Vue开发数字输入框组件
2017/12/19 Javascript
详解Vue.js 可拖放文本框组件的使用
2021/03/03 Vue.js
python3设计模式之简单工厂模式
2017/10/17 Python
解决Python print 输出文本显示 gbk 编码错误问题
2018/07/13 Python
Python实现查找字符串数组最长公共前缀示例
2019/03/27 Python
Python中typing模块与类型注解的使用方法
2019/08/05 Python
Tensorflow分批量读取数据教程
2020/02/07 Python
基于Keras 循环训练模型跑数据时内存泄漏的解决方式
2020/06/11 Python
Python3爬虫带上cookie的实例代码
2020/07/28 Python
Python headers请求头如何实现快速添加
2020/11/03 Python
Python偏函数实现原理及应用
2020/11/20 Python
任意存:BOXFUL
2018/05/21 全球购物
Linden Leaves官网:新西兰纯净护肤品
2020/12/20 全球购物
KIKO MILANO俄罗斯官网:意大利领先的化妆品和护肤品品牌
2021/01/09 全球购物
eDreams德国:南欧领先的在线旅游公司
2020/12/07 全球购物
J2EE是技术还是平台还是框架
2016/08/14 面试题
国旗下讲话演讲稿
2014/05/08 职场文书
小学运动会班级口号
2014/06/09 职场文书
缓刑人员思想汇报500字
2014/09/12 职场文书
离职证明范本(5篇)
2014/09/19 职场文书
个人查摆剖析材料
2014/10/16 职场文书
英文产品推荐信
2015/03/27 职场文书
创业计划书之水果店
2019/07/18 职场文书
教你用python实现一个无界面的小型图书管理系统
2021/05/21 Python
Mysql事务索引知识汇总
2022/03/17 MySQL