更新html技术比较

document.write()

document对象的write方法可以很简单的向页面的源代码中添加内容，不过不推荐使用。

优点：可以快速简单的让初学者理解如何向页面添加内容；

缺点：

• 只有页面初始化加载时有效
• 如果在页面加载完之后使用该方法，则会碰到：

1. 整个页面都被覆盖
2. 不是向页面添加内容
3. 创建了一个新页面

• 在严格验证XHTML中可能会遇到问题

element.innerHTML()

innerHTML属性允许以字符串的方式，获取/更新任何元素中的整个内容。

优点：

• 和DOM操作相比，可以使用更小代码添加大量新标签
• 向页面中添加大量新元素时，速度比DOM操作更快
• 当需要移除元素中的所有内容时，它更简单。

缺点：

• 不应该用来添加来自用户输入的内容，可能会带来安全隐患
• 在添加一个很大的DOM片段时，这个方法很难区分出每一个元素
• 事件处理程序可能不像预期那样生效

DOM操作

DOM操作提供了一组方法和属性，用来访问、创建以及更新元素和文本节点。

优点：

• 如果DOM片段拥有大量的兄弟节点，处理其中一个元素节点时使用这种方法更合适
• 不会影响事件处理程序
• 可以轻易的使用脚本来逐步添加元素

缺点：

• 如果对页面内容进行大量修改，其速度比innerHTML属性更慢
• 与使用innerHTML相比，它需要更多的代码来实现同样的功能