document.write()

document對象的write方法可以很簡單的向頁面的源代碼中添加內容，不過不推薦使用。

優點：可以快速簡單的讓初學者理解如何向頁面添加內容；

缺點：

• 只有頁面初始化加載時有效
• 如果在頁面加載完之後使用該方法，則會碰到：

1. 整個頁面都被覆蓋
2. 不是向頁面添加內容
3. 創建了一個新頁面

• 在嚴格驗證XHTML中可能會遇到問題

element.innerHTML()

innerHTML屬性允許以字符串的方式，獲取/更新任何元素中的整個內容。

優點：

• 和DOM操作相比，可以使用更小代碼添加大量新標簽
• 向頁面中添加大量新元素時，速度比DOM操作更快
• 當需要移除元素中的所有內容時，它更簡單。

缺點：

• 不應該用來添加來自用戶輸入的內容，可能會帶來安全隱患
• 在添加一個很大的DOM片段時，這個方法很難區分出每一個元素
• 事件處理程序可能不像預期那樣生效

DOM操作

DOM操作提供了一組方法和屬性，用來訪問、創建以及更新元素和文本節點。

優點：

• 如果DOM片段擁有大量的兄弟節點，處理其中一個元素節點時使用這種方法更合適
• 不會影響事件處理程序
• 可以輕易的使用腳本來逐步添加元素

缺點：

• 如果對頁面內容進行大量修改，其速度比innerHTML屬性更慢
• 與使用innerHTML相比，它需要更多的代碼來實現同樣的功能

更新html技術比較