document.write 与 innerHTML 的区别

对比 document.write 和 innerHTML 的使用场景和特性差异

问题

document.write 和 innerHTML 有什么区别？

document.write 直接写入页面的内容流。如果在写入前没有调用 document.open()，浏览器会自动调用。每次写完关闭后重新调用该函数，会导致页面被重写。

// 页面加载时使用
document.write('<h1>Hello World</h1>');

// 页面加载完成后调用会重写整个页面
window.onload = function() {
  document.write('<p>这会清空页面</p>'); // 整个页面被替换
};

innerHTML 是 DOM 元素的属性，代表该元素的 HTML 内容。可以精确修改某个具体元素，不会导致页面全部重绘。

// 修改特定元素
document.getElementById('content').innerHTML = '<p>更新内容</p>';

// 修改整个文档
document.documentElement.innerHTML = '<body>新页面</body>';

innerHTML 在大多数情况下优于 document.write，因为它允许更精确地控制页面更新的部分，避免整个页面重绘。