# 插入DOM 當我們獲得了某個DOM節點，想在這個DOM節點內插入新的DOM，應該如何做？ 如果這個DOM節點是空的，例如，`&lt;div&gt;&lt;/div&gt;`，那么，直接使用`innerHTML = '&lt;span&gt;child&lt;/span&gt;'`就可以修改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> ``` 把`&lt;p id="js"&gt;JavaScript&lt;/p&gt;`添加到`&lt;div id="list"&gt;`的最后一項： ``` var js = document.getElementById('js'), list = document.getElementById('list'); list.appendChild(js); ``` 現在，HTML結構變成了這樣： ``` <!-- HTML結構 --> <div id="list"> <p id="java">Java</p> <p id="python">Python</p> <p id="scheme">Scheme</p> <p id="js">JavaScript</p> </div> ``` 因為我們插入的`js`節點已經存在于當前的文檔樹，因此這個節點首先會從原先的位置刪除，再插入到新的位置。 更多的時候我們會從零創建一個新的節點，然后插入到指定位置： ``` var list = document.getElementById('list'), haskell = document.createElement('p'); haskell.id = 'haskell'; haskell.innerText = 'Haskell'; list.appendChild(haskell); ``` 這樣我們就動態添加了一個新的節點： ``` <!-- HTML結構 --> <div id="list"> <p id="java">Java</p> <p id="python">Python</p> <p id="scheme">Scheme</p> <p id="haskell">Haskell</p> </div> ``` 動態創建一個節點然后添加到DOM樹中，可以實現很多功能。舉個例子，下面的代碼動態創建了一個`&lt;style&gt;`節點，然后把它添加到`&lt;head&gt;`節點的末尾，這樣就動態地給文檔添加了新的CSS定義： ``` var d = document.createElement('style'); d.setAttribute('type', 'text/css'); d.innerHTML = 'p { color: red }'; document.getElementsByTagName('head')[0].appendChild(d); ``` 可以在Chrome的控制臺執行上述代碼，觀察頁面樣式的變化。 ## insertBefore 如果我們要把子節點插入到指定的位置怎么辦？可以使用`parentElement.insertBefore(newElement, referenceElement);`，子節點會插入到`referenceElement`之前。 還是以上面的HTML為例，假定我們要把`Haskell`插入到`Python`之前： ``` <!-- HTML結構 --> <div id="list"> <p id="java">Java</p> <p id="python">Python</p> <p id="scheme">Scheme</p> </div> ``` 可以這么寫： ``` var list = document.getElementById('list'), ref = document.getElementById('python'), haskell = document.createElement('p'); haskell.id = 'haskell'; haskell.innerText = 'Haskell'; list.insertBefore(haskell, ref); ``` 新的HTML結構如下： ``` <!-- HTML結構 --> <div id="list"> <p id="java">Java</p> <p id="haskell">Haskell</p> <p id="python">Python</p> <p id="scheme">Scheme</p> </div> ``` 可見，使用`insertBefore`重點是要拿到一個“參考子節點”的引用。很多時候，需要循環一個父節點的所有子節點，可以通過迭代`children`屬性實現： ``` var i, c, list = document.getElementById('list'); for (i = 0; i < list.children.length; i++) { c = list.children[i]; // 拿到第i個子節點 } ``` ## 練習 對于一個已有的HTML結構： 1. Scheme 2. JavaScript 3. Python 4. Ruby 5. Haskell ``` <!-- HTML結構 --> <ol id="test-list"> <li class="lang">Scheme</li> <li class="lang">JavaScript</li> <li class="lang">Python</li> <li class="lang">Ruby</li> <li class="lang">Haskell</li> </ol> ``` 按字符串順序重新排序DOM節點： ``` 'use strict'; // sort list: // 測試: ;(function () { var arr, i, t = document.getElementById('test-list'); if (t && t.children && t.children.length === 5) { arr = []; for (i=0; i<t.children.length; i++) { arr.push(t.children[i].innerText); } if (arr.toString() === ['Haskell', 'JavaScript', 'Python', 'Ruby', 'Scheme'].toString()) { alert('測試通過!'); } else { alert('測試失敗: ' + arr.toString()); } } else { alert('測試失敗!'); } })(); ```