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 Ext JS 状态默认存储时间
Feb 15 Javascript
jquery 新手学习常见问题解决方法
Apr 18 Javascript
JS小游戏之极速快跑源码详解
Sep 25 Javascript
javaScript中slice函数用法实例分析
Jun 08 Javascript
jquery Deferred 快速解决异步回调的问题
Apr 05 Javascript
Angular.js 4.x中表单Template-Driven Forms详解
Apr 25 Javascript
在Vue中使用highCharts绘制3d饼图的方法
Feb 08 Javascript
vue-router history模式下的微信分享小结
Jul 05 Javascript
Vue实现底部侧边工具栏的实例代码
Sep 03 Javascript
浅谈webpack4.x 入门(一篇足矣)
Sep 05 Javascript
详解解决Vue相同路由参数不同不会刷新的问题
Oct 12 Javascript
详解JavaScript 中的批处理和缓存
Nov 19 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 快速生成 Flash 动画的方法
2007/03/06 PHP
PHP 进程锁定问题分析研究
2009/11/24 PHP
php多功能图片处理类分享(php图片缩放类)
2014/03/14 PHP
phpmyadmin提示The mbstring extension is missing的解决方法
2014/12/17 PHP
php实现兼容2038年后Unix时间戳转换函数
2015/03/18 PHP
比较完整的微信开发php代码
2016/08/02 PHP
SCP远程VPS快速搬家和WDCP升级php5.3安装memcached和eaccelerator教程
2017/07/27 PHP
JavaScript入门教程(8) Location地址对象
2009/01/31 Javascript
javascript 哈希表(hashtable)的简单实现
2010/01/20 Javascript
js 小贴士一星期合集
2010/04/07 Javascript
js的一些常用方法小结
2011/06/29 Javascript
超详细的javascript数组方法汇总
2015/11/21 Javascript
Angular2 多级注入器详解及实例
2016/10/30 Javascript
AngularJS模板加载用法详解
2016/11/04 Javascript
IE8兼容Jquery.validate.js的问题
2016/12/01 Javascript
javascript ES6中箭头函数注意细节小结
2017/02/17 Javascript
Vue与Node.js通过socket.io通信的示例代码
2018/07/25 Javascript
微信小程序Getuserinfo解决方案图解
2018/08/24 Javascript
使用layui的layer组件做弹出层的例子
2019/09/27 Javascript
[04:52]第二届DOTA2亚洲邀请赛主赛事第一天比赛集锦:OG娜迦海妖放大配合谜团大中3人
2017/04/02 DOTA
跟老齐学Python之总结参数的传递
2014/10/10 Python
详解JavaScript编程中的window与window.screen对象
2015/10/26 Python
Python Paramiko模块的使用实际案例
2018/02/01 Python
Python中pandas dataframe删除一行或一列:drop函数详解
2018/07/03 Python
浅谈django三种缓存模式的使用及注意点
2018/09/30 Python
python 二维数组90度旋转的方法
2019/01/28 Python
python如何保证输入键入数字的方法
2019/08/23 Python
Python实现随机生成任意数量车牌号
2020/01/21 Python
python打印文件的前几行或最后几行教程
2020/02/13 Python
150行Python代码实现带界面的数独游戏
2020/04/04 Python
解决jupyter notebook打不开无反应 浏览器未启动的问题
2020/04/10 Python
Html5 语法与规则简要概述
2014/07/29 HTML / CSS
中专毕业生的自我鉴定
2013/12/01 职场文书
圣诞节活动策划方案
2014/06/09 职场文书
材料成型及控制工程专业求职信
2014/06/19 职场文书
初婚初育证明范本
2015/06/18 职场文书