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 Moblie入门—hello world的示例代码学习
Jan 08 Javascript
javascript使用定时函数实现跳转到某个页面
Dec 25 Javascript
js完美解决IE6不支持position:fixed的bug
Apr 24 Javascript
js实现两点之间画线的方法
May 12 Javascript
基于JavaScript实现移动端TAB触屏切换效果
Oct 20 Javascript
从源码看angular/material2 中 dialog模块的实现方法
Oct 18 Javascript
JS实现按钮颜色切换效果
Sep 05 Javascript
p5.js入门教程之鼠标交互的示例
Mar 16 Javascript
jquery的 filter()方法使用教程
Mar 22 jQuery
浅谈vuex中store的命名空间
Nov 08 Javascript
微信小程序实现带放大效果的轮播图
May 26 Javascript
前端vue+express实现文件的上传下载示例
Feb 18 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
调频问题解答
2021/03/01 无线电
PHP解析html类库simple_html_dom的转码bug
2014/05/22 PHP
CodeIgniter表单验证方法实例详解
2016/03/03 PHP
PHP GD库相关图像生成和处理函数小结
2016/09/30 PHP
实现php删除链表中重复的结点
2018/09/27 PHP
javascript new一个对象的实质
2010/01/07 Javascript
scrollWidth,clientWidth,offsetWidth的区别
2015/01/13 Javascript
程序员必知35个jQuery 代码片段
2015/11/05 Javascript
AngularJS入门教程之ng-checked 指令详解
2016/08/01 Javascript
一个简单的JavaScript Map实例(分享)
2016/08/03 Javascript
Node.js批量给图片加水印的方法
2016/11/15 Javascript
elementUI中Table表格问题的解决方法
2018/12/04 Javascript
如何为你的JavaScript代码日志着色详解
2019/04/08 Javascript
解决一个微信号同时支持多个环境网页授权问题
2019/08/07 Javascript
javascript实现弹幕墙效果
2019/11/28 Javascript
[04:41]2014DOTA2国际邀请赛 Liquid顺利突围晋级正赛
2014/07/09 DOTA
Python代码的打包与发布详解
2014/07/30 Python
Python结巴中文分词工具使用过程中遇到的问题及解决方法
2017/04/15 Python
python实现基于SVM手写数字识别功能
2020/05/27 Python
对pandas中apply函数的用法详解
2018/04/10 Python
关于Pycharm无法debug问题的总结
2019/01/19 Python
python实现猜数游戏
2020/03/27 Python
基于python实现破解滑动验证码过程解析
2020/05/28 Python
Python高并发解决方案实现过程详解
2020/07/31 Python
Python读写csv文件流程及异常解决
2020/10/20 Python
python全栈开发语法总结
2020/11/22 Python
jupyter notebook远程访问不了的问题解决方法
2021/01/11 Python
html5-websocket基于远程方法调用的数据交互实现
2012/12/04 HTML / CSS
美国在线印刷公司:PsPrint
2017/10/12 全球购物
台湾母婴用品购物网站:Infant婴之房
2018/06/15 全球购物
工程师自我评价怎么写
2013/09/19 职场文书
新闻专业毕业生求职信
2014/08/08 职场文书
2014七年级班主任工作总结
2014/12/05 职场文书
领导干部学习三严三实心得体会
2016/01/05 职场文书
MySQL sql模式设置引起的问题
2022/05/15 MySQL
Python绘制散点图之可视化神器pyecharts
2022/07/07 Python