DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> 關於JavaScript >> javascript dom 基本操作小結
javascript dom 基本操作小結
編輯:關於JavaScript     

自己平時可能也會經常遇到所以總結如下:
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);
後續可能有很多衍生的方法及應用這裡暫時不繼續寫下去了

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved