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代码
Aug 25 Javascript
jQuery数据显示插件整合实现代码
Oct 24 Javascript
使用bootstrap实现多窗口和拖动效果
Sep 22 Javascript
jQuery EasyUI中的日期控件DateBox修改方法
Nov 09 Javascript
JavaScript函数节流和函数防抖之间的区别
Feb 15 Javascript
PHP实现本地图片上传和验证功能
Feb 27 Javascript
javascript中mouseenter与mouseover的异同
Jun 06 Javascript
浅谈angular.js跨域post解决方案
Aug 30 Javascript
解决vue-cli webpack打包后加载资源的路径问题
Sep 25 Javascript
vue里input根据value改变背景色的实例
Sep 29 Javascript
node.js 基于cheerio的爬虫工具的实现(需要登录权限的爬虫工具)
Apr 10 Javascript
vue 使用高德地图vue-amap组件过程解析
Sep 07 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访问查询mysql数据的三种方法
2006/10/09 PHP
Yii支持多域名cors原理的实现
2018/12/05 PHP
经典的带阴影的可拖动的浮动层
2006/06/26 Javascript
javascript中方便增删改cookie的一个类
2012/10/11 Javascript
jQuery获取当前对象标签名称的方法
2014/02/07 Javascript
Javascript让DEDECMS告别手写Tag
2014/09/01 Javascript
详解JavaScript正则表达式之RegExp对象
2015/12/13 Javascript
编写高质量JavaScript代码的基本要点
2016/03/02 Javascript
Vue-cli 使用json server在本地模拟请求数据的示例代码
2017/11/02 Javascript
微信小程序wx.request实现后台数据交互功能分析
2017/11/25 Javascript
Vue项目分环境打包的实现步骤
2018/04/02 Javascript
Vue 组件修改根实例的数据的方法
2019/04/02 Javascript
150行代码带你实现微信小程序中的数据侦听
2019/05/17 Javascript
Layer组件多个iframe弹出层打开与关闭及参数传递的方法
2019/09/25 Javascript
JavaScript 作用域实例分析
2019/10/02 Javascript
vue实现分页的三种效果
2020/06/23 Javascript
vue实现树状表格效果
2020/12/29 Vue.js
[55:25]2018DOTA2亚洲邀请赛3月29日 小组赛A组 VG VS OG
2018/03/30 DOTA
分享Python开发中要注意的十个小贴士
2016/08/30 Python
Python WEB应用部署的实现方法
2019/01/02 Python
详解Django项目中模板标签及模板的继承与引用(网站中快速布置广告)
2019/03/27 Python
Python实现获取系统临时目录及临时文件的方法示例
2019/06/26 Python
django之自定义软删除Model的方法
2019/08/14 Python
线程安全及Python中的GIL原理分析
2019/10/29 Python
Python+OpenCV 实现图片无损旋转90°且无黑边
2019/12/12 Python
python GUI库图形界面开发之PyQt5信号与槽机制、自定义信号基础介绍
2020/02/25 Python
如何基于Python爬取隐秘的角落评论
2020/07/02 Python
python 如何引入协程和原理分析
2020/11/30 Python
Bloomingdale’s阿联酋:选购奢华时尚、美容及更多
2020/09/22 全球购物
教师评语大全
2014/04/28 职场文书
感谢信范文大全
2015/01/23 职场文书
工艺技术员岗位职责
2015/02/04 职场文书
Ajax 的初步实现(使用vscode+node.js+express框架)
2021/06/18 Javascript
MySQL里面的子查询的基本使用
2021/08/02 MySQL
MySQL分区路径子分区再分区
2022/04/13 MySQL
pytorch实现加载保存查看checkpoint文件
2022/07/15 Python