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 相关文章推荐
Display SQL Server Version Information
Jun 21 Javascript
jQuery 相关控件的事件操作分解
Aug 03 Javascript
通过javascript的匿名函数来分析几段简单有趣的代码
Jun 29 Javascript
最佳的addEvent事件绑定是怎样诞生的
Oct 24 Javascript
select、radio表单回显功能实现避免使用jquery载入赋值
Jun 08 Javascript
JavaScript中的Reflect对象详解(ES6新特性)
Jul 22 Javascript
JS闭包与延迟求值用法示例
Dec 22 Javascript
初识 Vue.js 中的 *.Vue文件
Nov 22 Javascript
JS实现遍历不规则多维数组的方法
Mar 21 Javascript
解决layui数据表格排序图标被超出的表头挤出去的问题
Sep 19 Javascript
详解vue页面首次加载缓慢原因及解决方案
Nov 06 Javascript
js实现图片粘贴到网页
Dec 06 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-cli简介(不会Shell语言一样用Shell)
2013/06/03 PHP
jQuery+CSS 实现的超Sexy下拉菜单
2010/01/17 Javascript
JavaScript中window.open用法实例详解
2015/04/15 Javascript
Js查找字符串中出现次数最多的字符及个数实例解析
2016/09/05 Javascript
学习vue.js计算属性
2016/12/03 Javascript
自定义PC微信扫码登录样式写法
2017/12/12 Javascript
Parcel 打包示例(React HelloWorld)
2018/01/16 Javascript
网页爬虫之cookie自动获取及过期自动更新的实现方法
2018/03/06 Javascript
JS数组去重常用方法实例小结【4种方法】
2018/05/28 Javascript
微信小程序实现美团菜单
2018/06/06 Javascript
Vue.js 实现数据展示全部和收起功能
2018/09/05 Javascript
在移动端使用vue-router和keep-alive的方法示例
2018/12/02 Javascript
微信小程序 setData 对 data数据影响问题
2019/04/18 Javascript
10个最受欢迎的 JavaScript框架(推荐)
2019/04/24 Javascript
vue + node如何通过一个Txt文件批量生成MP3并压缩成Zip
2020/06/02 Javascript
详解vue 组件的实现原理
2020/11/12 Javascript
用Python实现通过哈希算法检测图片重复的教程
2015/04/02 Python
详解Python中的多线程编程
2015/04/09 Python
Pycharm学习教程(7)虚拟机VM的配置教程
2017/05/04 Python
python文本数据相似度的度量
2018/03/12 Python
python基础教程项目五之虚拟茶话会
2018/04/02 Python
Python面向对象程序设计类变量与成员变量、类方法与成员方法用法分析
2019/04/12 Python
Python 3 实现定义跨模块的全局变量和使用教程
2019/07/07 Python
python匿名函数lambda原理及实例解析
2020/02/07 Python
Django 解决上传文件时,request.FILES为空的问题
2020/05/20 Python
python 如何利用argparse解析命令行参数
2020/09/11 Python
Python3爬虫RedisDump的安装步骤
2021/02/20 Python
印度尼西亚在线时尚购物网站:ZALORA印尼
2016/08/02 全球购物
少年闰土教学反思
2014/02/22 职场文书
质量标语大全
2014/06/12 职场文书
职业道德模范事迹材料
2014/08/24 职场文书
工程资料员岗位职责
2015/04/13 职场文书
mongodb的安装和开机自启动详细讲解
2021/08/02 MongoDB
javascript遍历对象的五种方式实例代码
2021/10/24 Javascript
pd.DataFrame中的几种索引变换的实现
2022/06/16 Python
SpringBoot项目多数据源及mybatis 驼峰失效的问题解决方法
2022/07/07 Java/Android