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中Object和Function的关系小结
Sep 26 Javascript
jQuery中的编程范式详解
Dec 15 Javascript
简单介绍JavaScript中字符串创建的基本方法
Jul 07 Javascript
谈一谈jQuery核心架构设计
Mar 28 Javascript
JavaScript队列、优先队列与循环队列
Nov 14 Javascript
使用BootStrap实现悬浮窗口的效果
Dec 13 Javascript
HTML5+Canvas调用手机拍照功能实现图片上传(上)
Apr 21 Javascript
layui弹出层效果实现代码
May 19 Javascript
swiper自定义分页器使用方法详解
Sep 14 Javascript
js实现开关灯效果
Mar 30 Javascript
jQuery操作选中select下拉框的值代码实例
Feb 07 jQuery
js canvas实现俄罗斯方块
Oct 11 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 破解防盗链图片函数
2008/12/09 PHP
php的list()的一步操作给一组变量进行赋值的使用
2011/05/18 PHP
Uncaught exception com_exception with message Failed to create COM object
2012/01/11 PHP
Laravel中注册Facades的步骤详解
2016/03/16 PHP
常用js脚本
2006/12/03 Javascript
优化JavaScript脚本的性能的几个注意事项
2006/12/22 Javascript
!DOCTYPE声明对JavaScript的影响分析
2010/04/12 Javascript
使用JavaScript实现Java的List功能(实例讲解)
2013/11/07 Javascript
javascript中声明函数的方法及调用函数的返回值
2014/07/22 Javascript
JavaScript操作DOM元素的childNodes和children区别
2015/04/01 Javascript
深入探究AngularJS框架中Scope对象的超级教程
2016/01/04 Javascript
jQuery新窗口打开外链接
2016/07/21 Javascript
概述BootStrap中role=&quot;form&quot;及role作用角色
2016/12/08 Javascript
微信小程序 天气预报开发实例代码源码
2017/01/20 Javascript
Vue自定义图片懒加载指令v-lazyload详解
2020/12/31 Javascript
对mac下nodejs 更新到最新版本的最新方法(推荐)
2018/05/17 NodeJs
bootstrap table表格插件之服务器端分页实例代码
2018/09/12 Javascript
javascript 原型与原型链的理解及实例分析
2019/11/23 Javascript
javascript前端实现多视频上传
2020/12/13 Javascript
在Django中限制已登录用户的访问的方法
2015/07/23 Python
Python爬虫模拟登录带验证码网站
2016/01/22 Python
浅谈Python的垃圾回收机制
2016/12/17 Python
详解python的sorted函数对字典按key排序和按value排序
2018/08/10 Python
python得到一个excel的全部sheet标签值方法
2018/12/10 Python
清除canvas画布内容(点擦除+线擦除)
2020/08/12 HTML / CSS
米兰网婚纱礼服法国网上商店:Milanoo法国
2016/08/20 全球购物
华为俄罗斯官方网上商城:购买Huawei手机和平板
2017/04/21 全球购物
英国最大线上综合鞋类商城:Office
2017/12/08 全球购物
奥林匹亚体育:Olympia Sports
2020/12/30 全球购物
进程的查看和调度分别使用什么命令
2015/03/25 面试题
项目经理的岗位职责
2013/11/23 职场文书
工程班组长岗位职责
2013/12/30 职场文书
企业办公室主任岗位职责
2014/02/19 职场文书
大学生自我评价200字(4篇)
2014/09/17 职场文书
《黄山奇石》教学反思
2016/02/18 职场文书
微信小程序实现聊天室功能
2021/06/14 Javascript