javascript dom 基本操作小结
更新时间：2010年04月11日 21:47:35 作者：
在网上找了很多dom操作的例子，感觉不全而且凌乱。
自己平时可能也会经常遇到所以总结如下：
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实现简单的可随机变色网页计算器,具有基本的四则运算与背景色随机变换功能,需要的朋友可以参考下2016-12-12
这篇文章主要介绍了JavaScript设计模式策略模式案例分享，策略设计模式就是指一个问题匹配多个解决方法，不一定要用到哪一个，而且有可能随时增加多个方案2022-06-06
这篇文章主要介绍了判断文件是否正在被使用的JS代码，有需要的朋友可以参考一下2013-12-12
这篇文章主要介绍了JS给超链接加确认对话框的方法,涉及javascript操作对话框的技巧,需要的朋友可以参考下2015-02-02
这篇文章主要介绍了基于javascript实现日历效果原理及代码实例,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2020-05-05
在移动端，侧滑菜单是一个很常用的组件，本文就详细的介绍小程序原生实现左滑抽屉菜单，具有一定的参考价值，感兴趣的可以了解一下2021-07-07
这篇文章主要为大家详细介绍了JavaScript实现抽奖器效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-10-10
在小程序的开发中，可能起点就是用户的登录与注册了。和粉丝的互动过程中发现，对于用户的登录注册还是没有彻底掌握。我们本篇就来分析一下登录与注册如何实现2022-08-08
这篇文章主要介绍了ES6的函数rest参数用法,通过一个rest参数代替arguments变量的例子,对ES6 rest参数用法讲解的非常详细,需要的朋友可以参考下2023-08-08
这篇文章主要介绍了ES6基础之字符串和函数的拓展,结合实例形式分析了ES6字符串与函数扩展的相关操作技巧与注意事项,需要的朋友可以参考下2019-08-08
最新评论