JavaScript之DOM插入更新刪除，供大家參考，具體內容如下

更新

拿到一個DOM節點后，我們可以對它進行更新。

可以直接修改節點的文本，方法有兩種：

一種是修改innerHTML屬性，這個方式非常強大，不但可以修改一個DOM節點的文本內容，還可以直接通過HTML片段修改DOM節點內部的子樹：

// 獲取<p id="p-id">...</p>var p = document.getElementById('p-id');// 設置文本為abc:p.innerHTML = 'ABC'; // <p id="p-id">ABC</p>// 設置HTML:p.innerHTML = 'ABC <span style="color:red">RED</span> XYZ';// <p>...</p>的內部結構已修改

用innerHTML時要注意，是否需要寫入HTML。如果寫入的字符串是通過網絡拿到了，要注意對字符編碼來避免XSS攻擊。
第二種是修改innerText或textContent屬性，這樣可以自動對字符串進行HTML編碼，保證無法設置任何HTML標簽：

// 獲取<p id="p-id">...</p>var p = document.getElementById('p-id');// 設置文本:p.innerText = '<script>alert("Hi")</script>';// HTML被自動編碼，無法設置一個<script>節點:// <p id="p-id"><script>alert("Hi")</script></p>

兩者的區別在于讀取屬性時，innerText不返回隱藏元素的文本，而textContent返回所有文本。另外注意IE<9不支持textContent。
修改CSS也是經常需要的操作。DOM節點的style屬性對應所有的CSS，可以直接獲取或設置。因為CSS允許font-size這樣的名稱，但它并非JavaScript有效的屬性名，所以需要在JavaScript中改寫為駝峰式命名fontSize：

// 獲取<p id="p-id">...</p>var p = document.getElementById('p-id');// 設置CSS:p.style.color = '#ff0000';p.style.fontSize = '20px';p.style.paddingTop = '2em';

插入

當我們獲得了某個DOM節點，想在這個DOM節點內插入新的DOM，應該如何做？
如果這個DOM節點是空的，例如，<div></div>，那么，直接使用innerHTML = '<span>child</span>'就可以修改DOM節點的內容，相當于“插入”了新的DOM節點。
如果這個DOM節點不是空的，那就不能這么做，因為innerHTML會直接替換掉原來的所有子節點。
有兩個辦法可以插入新的節點。一個是使用appendChild，把一個子節點添加到父節點的最后一個子節點。例如：

<!-- HTML結構 --><p id="js">JavaScript</p><div id="list">  <p id="java">Java</p>  <p id="python">Python</p>  <p id="scheme">Scheme</p></div>

把<p id="js">JavaScript</p>添加到<div id="list">的最后一項：

var  js = document.getElementById('js'),  list = document.getElementById('list');list.appendChild(js);