自己平時(shí)可能也會(huì)經(jīng)常遇到所以總結(jié)如下:
1,dom元素的創(chuàng)建
2,dom元素的插入
3,dom元素替換
4,dom元素的刪除
首先頁(yè)面上有這么些簡(jiǎn)單的dom元素
<div id="wrap">
<div id="a">aaaaaaaa</div>
<div id="b">bbbbbbbb</div>
<div id="c">ccccccccc</div>
</div>
接下來(lái)我們創(chuàng)建一個(gè)div元素,js代碼:
var div_d = document.createElement('div');
div_d.innerHTML = "dddddddd";
div_d.id = "d";
//這里不用innerText為了避免瀏覽器兼容引發(fā)一些問(wèn)題;
然后把創(chuàng)建的這個(gè)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);
最后我們刪除指定的一個(gè)元素id為b的div
div_b.parentNode.removeChild(div_b);
或者
document.body.removeChild(div_b);
后續(xù)可能有很多衍生的方法及應(yīng)用這里暫時(shí)不繼續(xù)寫(xiě)下去了
|
新聞熱點(diǎn)
疑難解答
圖片精選