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 相关文章推荐
javascript instanceof,typeof的区别
Mar 24 Javascript
JavaScript中String和StringBuffer的速度之争
Apr 01 Javascript
使用Mootools动态添加Css样式表代码,兼容各浏览器
Dec 12 Javascript
event.currentTarget与event.target的区别介绍
Dec 31 Javascript
解决javascript:window.close()在chrome,Firefox下失效的问题
May 07 Javascript
jQuery实现当按下回车键时绑定点击事件
Jan 28 Javascript
JavaScript与HTML的结合方法详解
Nov 23 Javascript
基于javascript实现九宫格大转盘效果
May 28 Javascript
JavaScript的String字符串对象常用操作总结
May 26 Javascript
通过JS和PHP两种方法判断用户请求时使用的浏览器类型
Sep 01 Javascript
代码详解JS操作剪贴板
Feb 11 Javascript
关于vue项目中搜索节流的实现代码
Sep 17 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
PHP操作数组相关函数
2011/02/03 PHP
PHP中最容易忘记的一些知识点总结
2013/04/28 PHP
微信支付开发教程(一)微信支付URL配置
2014/05/28 PHP
PHP使用array_fill定义多维数组的方法
2015/03/18 PHP
搭建基于Docker的PHP开发环境的详细教程
2015/07/01 PHP
php计算title标题相似比的方法
2015/07/29 PHP
PHP获取二维数组中某一列的值集合
2015/12/25 PHP
PHP实现十进制、二进制、八进制和十六进制转换相关函数用法分析
2017/04/25 PHP
PHP实现图片的等比缩放和Logo水印功能示例
2017/05/04 PHP
PHP自定义函数判断是否为Get、Post及Ajax提交的方法
2017/07/27 PHP
Vagrant(WSL)+PHPStorm+Xdebu 断点调试环境搭建
2019/12/13 PHP
指定js可访问其它域名的cookie的方法
2007/09/18 Javascript
使用dynatrace-ajax跟踪JavaScript的性能
2010/04/12 Javascript
js实现图片放大缩小功能后进行复杂排序的方法
2012/11/08 Javascript
js全屏显示显示代码的三种方法
2013/11/11 Javascript
js加减乘除丢失精度问题解决方法
2014/05/16 Javascript
javascript框架设计读书笔记之数组的扩展与修复
2014/12/02 Javascript
js实现滑动触屏事件监听的方法
2015/05/05 Javascript
基于Echarts 3.19 制作常用的图形(非静态)
2016/05/19 Javascript
详解js中call与apply关键字的作用
2016/11/21 Javascript
微信小程序五子棋游戏的棋盘,重置,对弈实现方法【附demo源码下载】
2019/02/20 Javascript
小程序input数据双向绑定实现方法
2019/10/17 Javascript
修改Python的pyxmpp2中的主循环使其提高性能
2015/04/24 Python
Python基础教程之正则表达式基本语法以及re模块
2016/03/25 Python
详解python如何在django中为用户模型添加自定义权限
2018/10/15 Python
PyTorch之图像和Tensor填充的实例
2019/08/18 Python
Python中zip()函数的解释和可视化(实例详解)
2020/02/16 Python
django实现将修改好的新模型写入数据库
2020/03/31 Python
基于python爬取梨视频实现过程解析
2020/11/09 Python
利用Python函数实现一个万历表完整示例
2021/01/23 Python
斯凯奇美国官网:SKECHERS美国
2016/08/20 全球购物
2014年减负工作总结
2014/12/10 职场文书
员工年度工作总结2015
2015/05/18 职场文书
2016企业先进集体事迹材料
2016/02/25 职场文书
springboot中的pom文件 project报错问题
2022/01/18 Java/Android
解决Mysql多行子查询的使用及空值问题
2022/01/22 MySQL