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 相关文章推荐
鼠标图片振动代码
Jul 06 Javascript
(推荐一个超好的JS函数库)S.Sams Lifexperience ScriptClassLib
Apr 29 Javascript
利用WebBrowser彻底解决Web打印问题(包括后台打印)
Jun 22 Javascript
Google排名中的10个最著名的 JavaScript库
Apr 27 Javascript
淘宝网提供的国内NPM镜像简介和使用方法
Apr 17 Javascript
SyntaxHighlighter 3.0.83使用笔记
Jan 26 Javascript
深入浅出分析javaScript中this用法
May 09 Javascript
jquery UI Datepicker时间控件的使用方法(加强版)
Nov 07 Javascript
jQuery EasyUI菜单与按钮详解
Jul 13 Javascript
关于Javascript中defer和async的区别总结
Sep 20 Javascript
微信小程序实现页面跳转传值以及获取值的方法分析
Dec 18 Javascript
javascript实现动态时钟的启动和停止
Jul 29 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 判断数组是几维数组
2013/03/20 PHP
PHP冒泡算法详解(递归实现)
2014/11/10 PHP
PHP安全下载文件的方法
2016/04/07 PHP
iframe 上下滚动条如何默认在下方实现原理
2012/12/10 Javascript
Web Inspector:关于在 Sublime Text 中调试Js的介绍
2013/04/18 Javascript
javascript firefox 自动加载iframe 自动调整高宽示例
2013/08/27 Javascript
jquery退出each循环的写法
2014/02/26 Javascript
对之前写的jquery分页做下升级
2014/06/19 Javascript
JavaScript利用append添加元素报错的解决方法
2014/07/01 Javascript
jQuery实现自动调整字体大小的方法
2015/06/15 Javascript
js表单中选择框值的获取及表单的序列化
2015/12/17 Javascript
jQuery操作json常用方法示例
2017/01/04 Javascript
JS跨域请求外部服务器的资源
2017/02/06 Javascript
js实现点击切换checkbox背景图片的简单实例
2017/05/08 Javascript
JS实现同一DOM元素上onClick事件与onDblClick事件并存的解决方法
2018/06/07 Javascript
Bootbox将后台JSON数据填充Form表单的实例代码
2018/09/10 Javascript
JavaScript ES2019中的8个新特性详解
2019/02/20 Javascript
巧妙运用v-model实现父子组件传值的方法示例
2019/04/07 Javascript
详解为什么Vue中的v-if和v-for不建议一起用
2021/01/13 Vue.js
Python 'takes exactly 1 argument (2 given)' Python error
2016/12/13 Python
python生成tensorflow输入输出的图像格式的方法
2018/02/12 Python
windows下python安装pip图文教程
2018/05/25 Python
在pycharm中设置显示行数的方法
2019/01/16 Python
tensorflow/core/platform/cpu_feature_guard.cc:140] Your CPU supports instructions that this T
2020/06/22 Python
python获取系统内存占用信息的实例方法
2020/07/17 Python
css3实例教程 一款纯css3实现的环形导航菜单
2014/10/20 HTML / CSS
如何掌握自荐信格式呢
2013/11/19 职场文书
采购部部长岗位职责
2014/02/06 职场文书
党性观念心得体会
2014/09/03 职场文书
机关作风建设工作总结
2014/10/23 职场文书
ktv服务员岗位职责
2015/02/09 职场文书
就业推荐表院系意见
2015/06/05 职场文书
推广普通话的宣传语
2015/07/13 职场文书
MySQL 发生同步延迟时Seconds_Behind_Master还为0的原因
2021/06/21 MySQL
5道关于python基础 while循环练习题
2021/11/27 Python
SQL解决未能删除约束问题drop constraint
2022/05/30 SQL Server