javascript dom 基本操作小结_javascript技巧
程序员文章站
2022-05-29 22:41:16
...
自己平时可能也会经常遇到所以总结如下:
1,dom元素的创建
2,dom元素的插入
3,dom元素替换
4,dom元素的删除
首先页面上有这么些简单的dom元素
接下来我们创建一个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);
后续可能有很多衍生的方法及应用这里暂时不继续写下去了
1,dom元素的创建
2,dom元素的插入
3,dom元素替换
4,dom元素的删除
首先页面上有这么些简单的dom元素
aaaaaaaa
bbbbbbbb
ccccccccc
接下来我们创建一个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);
后续可能有很多衍生的方法及应用这里暂时不继续写下去了
推荐阅读
-
js中设置元素class的三种方法小结_javascript技巧
-
遍历DOM对象内的元素属性示例代码_javascript技巧
-
《JavaScript DOM 编程艺术》读书笔记之JavaScript 简史_javascript技巧
-
JavaScript基本操作
-
JS的递增/递减运算符和带操作的赋值运算符的等价式_javascript技巧
-
js封装的textarea操作方法集合(兼容很好)_javascript技巧
-
javascript操作table(insertRow,deleteRow,insertCell,deleteCell方法详解)_javascript技巧
-
js操作ajax返回的json的注意问题!_javascript技巧
-
JavaScript使用指针操作实现约瑟夫问题实例_javascript技巧
-
jquery对单选框,多选框,文本框等常见操作小结_javascript技巧