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 相关文章推荐
jquery 防止表单重复提交代码
Jan 21 Javascript
心扬JS分页函数代码
Sep 10 Javascript
jquery ajax例子返回值详解
Sep 11 Javascript
jQuery实现TAB风格的全国省份城市滑动切换效果代码
Aug 24 Javascript
js实现的Easy Tabs选项卡用法实例
Sep 06 Javascript
jquery validate表单验证的基本用法入门
Jan 18 Javascript
JS实现动态表格的添加,修改,删除功能(推荐)
Jun 15 Javascript
js实现手机web图片左右滑动效果
Dec 29 Javascript
JavaScript多态与封装实例分析
Jul 27 Javascript
JavaScript闭包原理与用法实例分析
Aug 10 Javascript
vue多层嵌套路由实例分析
Mar 19 Javascript
react 生命周期实例分析
May 18 Javascript
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
多重?l件?合查?(一)
2006/10/09 PHP
mysql 中InnoDB和MyISAM的区别分析小结
2008/04/15 PHP
PHP实现的敏感词过滤方法示例
2019/03/06 PHP
javascript parseInt() 函数的进制转换注意细节
2013/01/08 Javascript
jQuery实现点击按钮弹出可关闭层的浮动层插件
2015/09/19 Javascript
jQuery基于$.ajax设置移动端click超时处理方法
2016/05/14 Javascript
基于angularJS的表单验证指令介绍
2016/10/21 Javascript
JS实现闭包中的沙箱模式示例
2017/09/07 Javascript
浅谈vue项目如何打包扔向服务器
2018/05/08 Javascript
Angular实现模版驱动表单的自定义校验功能(密码确认为例)
2018/05/17 Javascript
微信小程序购物车、父子组件传值及calc的注意事项总结
2018/11/14 Javascript
vue实现简单的星级评分组件源码
2018/11/16 Javascript
angular 实现同步验证器跨字段验证的方法
2019/04/11 Javascript
vue中使用vue-print.js实现多页打印
2020/03/05 Javascript
JavaScript 链表定义与使用方法示例
2020/04/28 Javascript
vue动态设置页面title的方法实例
2020/08/23 Javascript
Python的Django框架中的select_related函数对QuerySet 查询的优化
2015/04/01 Python
简单介绍Python中用于求最小值的min()方法
2015/05/15 Python
python脚本监控docker容器
2016/04/27 Python
Python实现的快速排序算法详解
2017/08/01 Python
Python numpy 点数组去重的实例
2018/04/18 Python
pycham查看程序执行的时间方法
2018/11/29 Python
python3读取图片并灰度化图片的四种方法(OpenCV、PIL.Image、TensorFlow方法)总结
2019/07/04 Python
详解pandas.DataFrame.plot() 画图函数
2020/06/14 Python
Wojas罗马尼亚网站:波兰皮鞋品牌
2018/11/01 全球购物
白俄罗斯女装和针织品网上商店:Presli.by
2019/10/13 全球购物
墨西哥购物网站:Elektra
2020/01/21 全球购物
毕业生个人投资创业计划书
2014/01/04 职场文书
小学毕业感言150字
2014/02/05 职场文书
竞争与合作演讲稿
2014/05/12 职场文书
应届大专生求职信
2014/06/26 职场文书
不错的求职信范文
2014/07/20 职场文书
2014小学教师个人工作总结
2014/11/10 职场文书
投资入股协议书
2016/03/22 职场文书
妇联2016年六一国际儿童节活动总结
2016/04/06 职场文书
详解MySQL中的pid与socket
2021/06/15 MySQL