javascript dom 基本操作小结


Posted in Javascript onApril 11, 2010

自己平时可能也会经常遇到所以总结如下:
1,dom元素的创建
2,dom元素的插入
3,dom元素替换
4,dom元素的删除

首先页面上有这么些简单的dom元素
<div id="wrap">

<div id="a">aaaaaaaa</div>

<div id="b">bbbbbbbb</div>

<div id="c">ccccccccc</div>
</div>
接下来我们创建一个div元素,js代码:
var div_d = document.createElement('div');
div_d.innerHTML = "dddddddd";
div_d.id = "d";
//这里不用innerText为了避免浏览器兼容引发一些问题;
然后把创建的这个id为d 的div插到dom元素id为b的div的前面
var div_wrap = document.getElementById('wrap');
var div_b = document.getElementById('b');
div_wrap.insertBefore(div_d,div_b);
如果直接插到id为wrap的子元素后面则可以这样:
div_wrap.insertBefore(div_d,null);

如果是替换掉div_b则如下:
div_wrap.replaceChild(div_d,div_b);
最后我们删除指定的一个元素id为b的div
div_b.parentNode.removeChild(div_b);
或者
document.body.removeChild(div_b);
后续可能有很多衍生的方法及应用这里暂时不继续写下去了

Javascript 相关文章推荐
JS中setTimeout()的用法详解
Apr 14 Javascript
js实现页面转发功能示例代码
Aug 05 Javascript
jquery+javascript编写国籍控件
Feb 12 Javascript
跟我学习JScript的Bug与内存管理
Nov 18 Javascript
快速掌握WordPress中加载JavaScript脚本的方法
Dec 17 Javascript
BootStrap Table 分页后重新搜索问题的解决办法
Aug 08 Javascript
React Native中NavigatorIOS组件的简单使用详解
Jan 27 Javascript
vue 纯js监听滚动条到底部的实例讲解
Sep 03 Javascript
React 源码中的依赖注入方法
Nov 07 Javascript
优雅地使用loading(推荐)
Apr 20 Javascript
vue使用screenfull插件实现全屏功能
Sep 17 Javascript
Vue 集成 PDF.js 实现 PDF 预览和添加水印的步骤
Jan 22 Vue.js
JS Excel读取和写入操作(模板操作)实现代码
Apr 11 #Javascript
一个js的tab切换效果代码[代码分离]
Apr 11 #Javascript
YUI的Tab切换实现代码
Apr 11 #Javascript
利用JS重写Cognos右键菜单的实现代码
Apr 11 #Javascript
可以将word转成html的js代码
Apr 11 #Javascript
jquery 表格分页等操作实现代码(pagedown,pageup)
Apr 11 #Javascript
jquery 模拟雅虎首页的点击对话框效果
Apr 11 #Javascript
You might like
php基础学习之变量的使用
2011/06/09 PHP
mysql查找删除重复数据并只保留一条实例详解
2016/09/24 PHP
PHP实现用户异地登录提醒功能的方法【基于thinkPHP框架】
2018/03/15 PHP
Vagrant(WSL)+PHPStorm+Xdebu 断点调试环境搭建
2019/12/13 PHP
php使用event扩展的io复用测试的示例
2020/10/20 PHP
基于SVG的web页面图形绘制API介绍及编程演示
2013/06/28 Javascript
checkbox全选所涉及到的知识点介绍
2013/12/31 Javascript
兼容所有浏览器的js复制插件Zero使用介绍
2014/03/19 Javascript
js实现飞入星星特效代码
2014/10/17 Javascript
javascript中eval和with用法实例总结
2015/11/30 Javascript
基于Vue.js实现简单搜索框
2020/03/26 Javascript
js实现微博发布小功能
2017/01/12 Javascript
微信小程序实现张图片合成为一张并下载
2019/07/16 Javascript
微信小程序实现图片翻转效果的实例代码
2019/09/20 Javascript
nestjs中异常过滤器Exceptionfilter的具体使用
2021/02/07 Javascript
[02:40]DOTA2英雄基础教程 炼金术士
2013/12/23 DOTA
Python中返回字典键的值的values()方法使用
2015/05/22 Python
python组合无重复三位数的实例
2018/11/13 Python
浅谈python3.x pool.map()方法的实质
2019/01/16 Python
python GUI库图形界面开发之PyQt5单选按钮控件QRadioButton详细使用方法与实例
2020/02/28 Python
python实现将列表中各个值快速赋值给多个变量
2020/04/02 Python
Python制作数据预测集成工具(值得收藏)
2020/08/21 Python
Python使用requests模块爬取百度翻译
2020/08/25 Python
Docker如何部署Python项目的实现详解
2020/10/26 Python
美国羊皮公司:Overland
2018/01/15 全球购物
英国剑桥包中文官网:The Cambridge Satchel Company中国
2018/11/06 全球购物
美国快时尚彩妆品牌:Winky Lux(透明花瓣润唇膏)
2018/11/06 全球购物
皇家阿尔伯特瓷器美国官网:Royal Albert美国
2020/02/16 全球购物
党员干部承诺书
2014/03/25 职场文书
教师对学生的寄语
2014/04/03 职场文书
科学育儿宣传标语
2014/10/08 职场文书
个人查摆问题及整改措施
2014/10/16 职场文书
给老婆道歉的话
2015/01/20 职场文书
前台文员岗位职责
2015/02/04 职场文书
2016大学迎新晚会开场白
2015/11/24 职场文书
Android移动应用开发指南之六种布局详解
2022/09/23 Java/Android