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 蒙版进度条(结合图片)
Mar 10 Javascript
Jquery中使用setInterval和setTimeout的方法
Apr 08 Javascript
关于JavaScript与HTML的交互事件
Apr 12 Javascript
JQUERY对单选框(radio)操作的小例子
Apr 25 Javascript
jQuery实现倒计时按钮功能代码分享
Sep 03 Javascript
jQuery实现非常实用漂亮的select下拉菜单选择效果
Nov 06 Javascript
通过Tabs方法基于easyUI+bootstrap制作工作站
Mar 28 Javascript
AngularJS中的包含详细介绍及实现示例
Jul 28 Javascript
关于javascript的一些知识以及循环详解
Sep 12 Javascript
浅谈angularjs中响应回车事件
Apr 24 Javascript
js数组实现权重概率分配
Sep 12 Javascript
js对象属性名驼峰式转下划线的实例代码
Sep 17 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 删除cookie方法详解
2014/12/01 PHP
php使用curl简单抓取远程url的方法
2015/03/13 PHP
ThinkPHP中数据操作案例分析
2015/09/27 PHP
php实现的http请求封装示例
2016/11/08 PHP
php技巧小结【推荐】
2017/01/19 PHP
PHP 记录访客的浏览信息方法
2018/01/29 PHP
js获取单选按钮的数据
2006/11/27 Javascript
CSS常用网站布局实例
2008/04/03 Javascript
javascript 四则运算精度修正函数代码
2010/05/31 Javascript
js 纯数字不重复排列的另类方法
2010/07/17 Javascript
jQuery scrollFix滚动定位插件
2015/04/01 Javascript
javascript中sort() 方法使用详解
2015/08/30 Javascript
以jQuery中$.Deferred对象为例讲解promise对象是如何处理异步问题
2015/11/13 Javascript
JS实现类似51job上的地区选择效果示例
2016/11/17 Javascript
JS设计模式之访问者模式定义与用法分析
2018/02/05 Javascript
Vue一个案例引发的递归组件的使用详解
2018/11/15 Javascript
JavaScript封闭函数及常用内置对象示例
2019/05/13 Javascript
使用layui前端框架弹出form表单以及提交的示例
2019/10/25 Javascript
vue微信分享插件使用方法详解
2020/02/18 Javascript
Swiper实现导航栏滚动效果
2020/10/16 Javascript
Python编程入门之Hello World的三种实现方式
2015/11/13 Python
Python解析json文件相关知识学习
2016/03/01 Python
Python数据结构之单链表详解
2017/09/12 Python
pycharm下打开、执行并调试scrapy爬虫程序的方法
2017/11/29 Python
PyQt5 如何让界面和逻辑分离的方法
2020/03/24 Python
纯CSS打造(无图像无js)的非常流行的讲话(语音)气泡效果
2012/12/28 HTML / CSS
详解css3中dispaly的Grid布局与Flex布局
2020/09/11 HTML / CSS
惠普墨西哥官方商店:HP墨西哥
2016/12/01 全球购物
英文简历中的自荐信范文
2013/12/14 职场文书
我有一个梦想演讲稿
2014/05/05 职场文书
绘画专业自荐信
2014/07/04 职场文书
私人委托书格式
2014/09/10 职场文书
2015年中个人总结范文
2015/03/10 职场文书
元宵节晚会主持词
2015/07/01 职场文书
Redis遍历所有key的两个命令(KEYS 和 SCAN)
2021/04/12 Redis
如何使用Python对NetCDF数据做空间相关分析
2021/04/21 Python