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 相关文章推荐
jQuery与ExtJS之选择实例分析
Aug 19 Javascript
js实现简单的星级选择器提交效果适用于评论等
Oct 18 Javascript
JQuery插件开发示例代码
Nov 06 Javascript
JavaScript实现将数组中所有元素连接成一个字符串的方法
Apr 06 Javascript
AngularJS基础学习笔记之控制器
May 10 Javascript
JavaScript中的各种操作符使用总结
May 26 Javascript
浅谈JS继承_借用构造函数 &amp; 组合式继承
Aug 16 Javascript
jQuery EasyUI 折叠面板accordion的使用实例(分享)
Dec 25 jQuery
关于axios不能使用Vue.use()浅析
Jan 12 Javascript
浅谈在react中如何实现扫码枪输入
Jul 04 Javascript
vue-cli 构建骨架屏的方法示例
Nov 08 Javascript
vue实现路由懒加载的3种方法示例
Sep 01 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(5) 类和对象
2010/02/16 PHP
PHP PDO函数库详解
2010/04/27 PHP
php jq jquery getJSON跨域提交数据完整版
2013/09/13 PHP
PHP url的pathinfo模式加载不同控制器的简单实现
2016/08/12 PHP
php版微信开发Token验证失败或请求URL超时问题的解决方法
2016/09/23 PHP
phpcms实现验证码替换及phpcms实现全站搜索功能教程详解
2017/12/13 PHP
Linux下源码包安装Swoole及基本使用操作图文详解
2019/04/02 PHP
Yii框架中使用PHPExcel的方法分析
2019/07/25 PHP
Prototype使用指南之dom.js
2007/01/10 Javascript
ASP.NET jQuery 实例18 通过使用jQuery validation插件校验DropDownList
2012/02/03 Javascript
ASP.NET中AJAX 调用实例代码
2012/05/03 Javascript
javascript实现拖动元素交换位置
2015/11/29 Javascript
jQuery阻止移动端遮罩层后页面滚动
2017/03/15 Javascript
微信小程序实现皮肤功能(夜间模式)
2017/06/18 Javascript
利用JS做网页特效_大图轮播(实例讲解)
2017/08/09 Javascript
webpack中CommonsChunkPlugin详细教程(小结)
2017/11/09 Javascript
浅谈vuex为什么不建议在action中修改state
2020/02/02 Javascript
JavaScript Html实现移动端红包雨功能页面
2021/01/10 Javascript
python 通过 socket 发送文件的实例代码
2018/08/14 Python
在python中使用xlrd获取合并单元格的方法
2018/12/26 Python
python处理multipart/form-data的请求方法
2018/12/26 Python
python使用thrift教程的方法示例
2019/03/21 Python
PyQt5创建一个新窗口的实例
2019/06/20 Python
Python 存取npy格式数据实例
2020/07/01 Python
在django中查询获取数据,get, filter,all(),values()操作
2020/08/09 Python
Html5百叶窗效果的示例代码
2017/12/11 HTML / CSS
法国春天百货官网:Printemps.com
2020/06/29 全球购物
如何判断计算机可能已经中马
2013/03/22 面试题
历史学专业个人的自我评价
2013/10/13 职场文书
物业管理员岗位职责范文
2013/11/25 职场文书
县优秀教师事迹材料
2014/01/31 职场文书
消防安全责任书范本
2014/04/15 职场文书
教师岗位职责
2015/02/03 职场文书
行政申诉状范文
2015/05/20 职场文书
学术研讨会主持词
2015/07/04 职场文书
聊聊Lombok中的@Builder注解使用教程
2021/11/17 Java/Android