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 源码分析笔记(4) Ready函数
Jun 02 Javascript
js实现图片轮换效果代码
Apr 16 Javascript
javascript的渐进增强与平稳退化浅谈
Nov 12 Javascript
Js 正则表达式知识汇总
Dec 02 Javascript
javascript框架设计之浏览器的嗅探和特征侦测
Jun 23 Javascript
jQuery移动端日期(datedropper)和时间(timedropper)选择器附源码下载
Apr 19 Javascript
vue非父子组件通信问题及解决方法
Jun 11 Javascript
详解JavaScript中关于this指向的4种情况
Apr 18 Javascript
vue+element实现表单校验功能
May 20 Javascript
jquery实现有过渡效果的tab切换
Jul 17 jQuery
vue+iview框架实现左侧动态菜单功能的示例代码
Jul 23 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/05/04 PHP
zf框架的校验器使用使用示例(自定义校验器和校验器链)
2014/03/13 PHP
AJAX的使用方法详解
2017/04/29 PHP
php实现支付宝当面付(扫码支付)功能
2018/05/30 PHP
jquery 表单下所有元素的隐藏
2009/07/25 Javascript
Javascript中typeof 用法小结
2015/05/12 Javascript
ECMAScript6函数默认参数
2015/06/12 Javascript
jquery仿QQ登录账号选择下拉框效果
2016/03/22 Javascript
Jquery attr()方法 属性赋值和属性获取详解
2016/04/15 Javascript
基于jquery实现轮播特效
2016/04/22 Javascript
JavaScript调试的多个必备小Tips
2017/01/15 Javascript
nodejs 搭建简易服务器的图文教程(推荐)
2017/07/18 NodeJs
vue弹窗插件实战代码
2018/09/08 Javascript
vue axios基于常见业务场景的二次封装的实现
2018/09/21 Javascript
javascript设计模式 ? 装饰模式原理与应用实例分析
2020/04/14 Javascript
解决echarts图表使用v-show控制图表显示不全的问题
2020/07/19 Javascript
element-ui tree结构实现增删改自定义功能代码
2020/08/31 Javascript
跟老齐学Python之玩转字符串(2)更新篇
2014/09/28 Python
Python THREADING模块中的JOIN()方法深入理解
2015/02/18 Python
Python数据类型之Tuple元组实例详解
2019/05/08 Python
python实现126邮箱发送邮件
2020/05/20 Python
Python定时任务APScheduler安装及使用解析
2020/08/07 Python
美国保健品专家:Life Extension
2018/05/04 全球购物
python re模块和正则表达式
2021/03/24 Python
《中华少年》教学反思
2014/02/15 职场文书
国贸专业的职业规划书
2014/03/15 职场文书
求职信结尾怎么写
2014/05/26 职场文书
大学生党员学习焦裕禄精神思想汇报
2014/09/10 职场文书
学生检讨书怎么写
2014/10/09 职场文书
商业用房租赁协议书
2014/10/13 职场文书
入党积极分子十八届四中全会思想汇报
2014/10/23 职场文书
黄石寨导游词
2015/02/05 职场文书
教师工作表现自我评价
2015/03/05 职场文书
商场收银员岗位职责
2015/04/07 职场文书
2016重阳节红领巾广播稿
2015/12/18 职场文书
【HBU】数据库第四周 单表查询
2021/04/05 SQL Server