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分割字符串并放入数组的函数
Jul 04 Javascript
HTML5+setCutomValidity()函数验证表单实例分享
Apr 24 Javascript
jQuery实现图片走马灯效果的原理分析
Jan 16 Javascript
基于jQuery实现仿百度首页选项卡切换效果
May 29 Javascript
浅谈js中的in-for循环
Jun 28 Javascript
jquery实现多次上传同一张图片
Jan 09 Javascript
使用javascript函数编写简单银行取钱存钱流程
May 26 Javascript
Vue3 源码导读(推荐)
Oct 14 Javascript
Vue实现base64编码图片间的切换功能
Dec 04 Javascript
微信小程序返回上一级页面的实现代码
Jun 19 Javascript
浅析vue中的nextTick
Dec 28 Vue.js
vue 组件基础知识总结
Jan 26 Vue.js
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 session有效期session.gc_maxlifetime
2011/04/20 PHP
PHP字符串长度计算 - strlen()函数使用介绍
2013/10/15 PHP
php实现的简易扫雷游戏实例
2015/07/09 PHP
搭建Vim为自定义的PHP开发工具的一些技巧
2015/12/11 PHP
php 的反射详解及示例代码
2016/08/25 PHP
php结合redis高并发下发帖、发微博的实现方法
2016/12/15 PHP
利用Laravel生成Gravatar头像地址的优雅方法
2017/12/30 PHP
JavaScript 组件之旅(四):测试 JavaScript 组件
2009/10/28 Javascript
关于javascript DOM事件模型的两件事
2010/07/22 Javascript
$.ajax返回的JSON无法执行success的解决方法
2011/09/09 Javascript
编写针对IE的JS代码两种编写方法
2013/01/30 Javascript
jquery实现隐藏与显示动画效果/输入框字符动态递减/导航按钮切换
2013/07/01 Javascript
代码获取历史上的今天发生的事
2014/04/11 Javascript
js小数运算出现多位小数如何解决
2015/10/08 Javascript
js实现上传图片及时预览
2016/05/07 Javascript
JavaScript实现购物车基本功能
2017/07/21 Javascript
JavaScript分步实现一个出生日期的正则表达式
2018/03/22 Javascript
vue.js引入外部CSS样式和外部JS文件的方法
2019/01/06 Javascript
小程序根据手机机型设置自定义底部导航距离
2019/06/04 Javascript
layui数据表格跨行自动合并的例子
2019/09/02 Javascript
微信小程序如何实现点击图片放大功能
2020/01/21 Javascript
redux处理异步action解决方案
2020/03/22 Javascript
Python中super的用法实例
2015/05/28 Python
Python打印斐波拉契数列实例
2015/07/07 Python
初探TensorFLow从文件读取图片的四种方式
2018/02/06 Python
Php多进程实现代码
2018/05/07 Python
Python数据可视化教程之Matplotlib实现各种图表实例
2019/01/13 Python
Django-Scrapy生成后端json接口的方法示例
2020/10/06 Python
戴尔英国翻新电脑和电子产品:Dell UK Refurbished Computers
2019/07/30 全球购物
.NET常见笔试题集
2012/12/01 面试题
地道战观后感300字
2015/06/04 职场文书
信息技术研修心得体会
2016/01/08 职场文书
《灰雀》教学反思
2016/02/19 职场文书
2016春季运动会开幕词
2016/03/04 职场文书
使用pipenv管理python虚拟环境的全过程
2021/09/25 Python
Python基础 括号()[]{}的详解
2021/11/07 Python