前兩天我們介紹如何找節點，今天我們要來介紹如何使用 JavaScript 動態的建立節點。

document.createElement()
可以使用這個方法動態建立一個新的節點，如下：

document.createElement('div')

剛建立出來的節點，這時候的瀏覽器還沒辦法顯示它，我們可以透過 appendChild()、 insertBefore()、 replaceChild() 這些方法把我們動態建立的節點加入到我們想要的位置，瀏覽器才能夠顯示它！

document.createTextNode()
除了上面的 html 節點之外，我們也可以使用 createTextNode() 來新增一個文字節點，我們直接在這個方法加入我們想要的字串就可以了！不過跟動態新增 html 節點一樣，剛新增是沒辦法把瀏覽器顯示的！

let div = document.createElement('div') //新增 html 節點

let text = document.createTextNode('Hi ! I'm Jerry') // 新增 文字節點
div.appendChild(text) // 將剛新增的文字節點放進去到我們剛新增的 html 節點裡面

document.createDocumentFragment()
它是一種沒有父層節點的 “最小化文件物件”。 可以把它看作是一個虛擬的容器，可以保存一段文件結構。

let ul = document.querySelector('.myList') // 取得外層容器
let fragment = document.createDocumentFragment() // 建立虛擬容器
for (let i = 0, i < 3, i++){
  let li = document.createElement('li')
  li.appendChild(document.createTextNode("item" + (i + 1)))
  fragment.appendChild(li)
}
ul.appendChild(fragment) // 將組合好的 fragment 放入 ul 裡面

注意：當我們要進行大量的 DOM 操作，使用 DocumentFragment 效能會比直接操作 DOM 好！

document.write()
document 物件如果要把某個內容寫入網頁可以使用 write() 方法，除了是字串外，也可以是 html 標籤！

document.write('<h1>Hi</h1>')

注意：剛網頁已經讀取完之後才執行 document.write()，所以裡面的新增出來的內容會覆蓋掉原本的！