手机
当前位置:查字典教程网 >编程开发 >Javascript教程 >javascript dom 基本操作小结
javascript dom 基本操作小结
摘要:自己平时可能也会经常遇到所以总结如下:1,dom元素的创建2,dom元素的插入3,dom元素替换4,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 dom 基本操作小结】相关文章:

Javascript 小技巧全集第1/4页

javascript检测两个数组是否相似

理解javascript封装

Javascript进制转换实例

javascript操作表格

JavaScript基本语法讲解

javascript字符串与数组转换汇总

javascript动态创建链接的方法

javascript基于DOM实现权限选择实例分析

Node.js中JavaScript操作MySQL的常用方法整理

精品推荐
分类导航