时间:2021-05-28
自己平时可能也会经常遇到所以总结如下:
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);
后续可能有很多衍生的方法及应用这里暂时不继续写下去了
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
大致介绍 jQuery作为JavaScript库,继承并发扬了JavaScript对DOM对象操作的特性,使开发人员能方便的操作DOM对象。jQuery中的D
DOM操作的分类:DOMCORE(核心)、HTML-DOM和CSS-DOM1.DOMCoreDOMCore并不专属于javascript,任何一种支持DOM的程
相关阅读:JavaScript事件学习小结(五)js中事件类型之鼠标事件JavaScript事件学习小结(一)事件流javaScript事件学习小结(四)eve
相关阅读:JavaScript事件学习小结(五)js中事件类型之鼠标事件JavaScript事件学习小结(一)事件流javaScript事件学习小结(四)eve
相关阅读:JavaScript事件学习小结(五)js中事件类型之鼠标事件JavaScript事件学习小结(一)事件流javaScript事件学习小结(四)eve