基于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 相关文章推荐
cnblogs TagCloud基于jquery的实现代码
Jun 11 Javascript
来自国外的页面JavaScript文件优化
Dec 08 Javascript
在iframe里的页面编写js,实现在父窗口上创建动画效果展开和收缩的div(不变动iframe父窗口代码)
Dec 20 Javascript
jQuery实现在下拉列表选择时获取json数据的方法
Apr 16 Javascript
浅谈JavaScript中的字符编码转换问题
Jul 07 Javascript
微信小程序 图片等比例缩放(图片自适应屏幕)
Nov 16 Javascript
JS 循环li添加点击事件 (闭包的应用)
Dec 10 Javascript
js每隔两秒输出数组中的一项(实例)
May 28 Javascript
通过实例解析JavaScript for in及for of区别
Jun 15 Javascript
基于JS实现计算24点算法代码实例解析
Jul 23 Javascript
Javascript var变量删除原理及实现
Aug 26 Javascript
解决vue项目运行提示Warnings while compiling.警告的问题
Sep 18 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上的memcache和memcached两个pecl库
2010/03/29 PHP
PHP字符编码问题之GB2312 VS UTF-8解决方法
2011/06/23 PHP
图解找出PHP配置文件php.ini的路径的方法
2014/08/20 PHP
yii2高级应用之自定义组件实现全局使用图片上传功能的方法
2016/10/08 PHP
Javascript的严格模式strict mode详细介绍
2014/06/06 Javascript
基于BootStrap环境写jQuery tabs插件
2016/07/12 Javascript
JS实现的自动打字效果示例
2017/03/10 Javascript
基于jQuery实现的Ajax 验证用户名唯一性实例代码
2017/06/28 jQuery
Angular实现的敏感文字自动过滤与提示功能示例
2017/12/29 Javascript
JavaScript复制内容到剪贴板的两种常用方法
2018/02/27 Javascript
vue.js 实现图片本地预览 裁剪 压缩 上传功能
2018/03/01 Javascript
使用Vue组件实现一个简单弹窗效果
2018/04/23 Javascript
jquery.pagination.js分页使用教程
2018/10/23 jQuery
如何使用puppet替换文件中的string
2018/12/06 Javascript
EasyUI 数据表格datagrid列自适应内容宽度的实现
2019/07/18 Javascript
vue 解决数组赋值无法渲染在页面的问题
2019/10/28 Javascript
js实现无缝轮播图特效
2020/05/09 Javascript
JavaScript Tab菜单实现过程解析
2020/05/13 Javascript
python基于Tkinter库实现简单文本编辑器实例
2015/05/05 Python
python对象与json相互转换的方法
2019/05/07 Python
HTML5 canvas基本绘图之绘制线段
2016/06/27 HTML / CSS
HTML5教程之html 5 本地数据库(Web Sql Database)
2014/04/03 HTML / CSS
基于HTML5+CSS3实现简单的时钟效果
2017/09/11 HTML / CSS
德国柯吉澳趣味家居:Koziol
2017/08/24 全球购物
365 Tickets英国:全球景点门票
2019/07/06 全球购物
英国Lookfantastic中文网站:护肤品美妆美发购物(英国直邮)
2020/04/27 全球购物
实习生自我鉴定范文
2013/12/05 职场文书
采购部主管岗位职责
2014/01/01 职场文书
采购经理岗位职责
2014/02/16 职场文书
竞聘演讲稿
2014/04/24 职场文书
志愿者宣传口号
2014/06/17 职场文书
列车乘务员工作不细心检讨书
2014/10/07 职场文书
2014年统计工作总结
2014/11/21 职场文书
利用python进行数据加载
2021/06/20 Python
Java实现字符串转为驼峰格式的方法详解
2022/07/07 Java/Android
Python可视化神器pyecharts绘制地理图表
2022/07/07 Python