javascript dom 基本操作小結(jié)
自己平時可能也會經(jīng)常遇到所以總結(jié)如下：
1，dom元素的創(chuàng)建
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>
接下來我們創(chuàng)建一個div元素，js代碼：
var div_d = document.createElement('div');
div_d.innerHTML = "dddddddd";
div_d.id = "d";
//這里不用innerText為了避免瀏覽器兼容引發(fā)一些問題；
然后把創(chuàng)建的這個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);
后續(xù)可能有很多衍生的方法及應用這里暫時不繼續(xù)寫下去了
相關(guān)文章
javascript實現(xiàn)簡單的可隨機變色網(wǎng)頁計算器示例
這篇文章主要介紹了javascript實現(xiàn)簡單的可隨機變色網(wǎng)頁計算器,具有基本的四則運算與背景色隨機變換功能,需要的朋友可以參考下2016-12-12
這篇文章主要介紹了JavaScript設計模式策略模式案例分享，策略設計模式就是指一個問題匹配多個解決方法，不一定要用到哪一個，而且有可能隨時增加多個方案2022-06-06
這篇文章主要介紹了判斷文件是否正在被使用的JS代碼，有需要的朋友可以參考一下2013-12-12
這篇文章主要介紹了JS給超鏈接加確認對話框的方法,涉及javascript操作對話框的技巧,需要的朋友可以參考下2015-02-02
基于javascript實現(xiàn)日歷功能原理及代碼實例
這篇文章主要介紹了基于javascript實現(xiàn)日歷效果原理及代碼實例,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下2020-05-05
在移動端，側(cè)滑菜單是一個很常用的組件，本文就詳細的介紹小程序原生實現(xiàn)左滑抽屜菜單，具有一定的參考價值，感興趣的可以了解一下2021-07-07
這篇文章主要為大家詳細介紹了JavaScript實現(xiàn)抽獎器效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-10-10
在小程序的開發(fā)中，可能起點就是用戶的登錄與注冊了。和粉絲的互動過程中發(fā)現(xiàn)，對于用戶的登錄注冊還是沒有徹底掌握。我們本篇就來分析一下登錄與注冊如何實現(xiàn)2022-08-08
ES6的函數(shù)rest參數(shù)使用小結(jié)
這篇文章主要介紹了ES6的函數(shù)rest參數(shù)用法,通過一個rest參數(shù)代替arguments變量的例子,對ES6?rest參數(shù)用法講解的非常詳細,需要的朋友可以參考下2023-08-08
這篇文章主要介紹了ES6基礎之字符串和函數(shù)的拓展,結(jié)合實例形式分析了ES6字符串與函數(shù)擴展的相關(guān)操作技巧與注意事項,需要的朋友可以參考下2019-08-08