document.write和innerHTML、innerText 的区别

document.write，innerHTML，和 innerText 都是 JavaScript 中用于操作 HTML 文档内容的方法，但它们之间有一些重要的区别。

1、document.write

document.write 是一个用于向 HTML 输出流写内容的方法。这个方法主要用于在文档加载期间动态生成 HTML。然而，如果 document.write 在文档加载完成后被调用，它会覆盖整个文档。因此，这个方法在现代的 web 开发中已经不常用了，因为它可能导致一些预期之外的行为。

示例：

document.write('<p>这是一段新的段落。</p>');

2、innerHTML

innerHTML 是一个属性，用于获取或替换 HTML 元素的内容（包括 HTML 标签）。当你读取 innerHTML 时，它会返回元素内部的 HTML 内容。当你向 innerHTML 写入内容时，它会替换元素内部的现有内容。

示例：

// 获取元素内容
var content = document.getElementById('myElement').innerHTML;
console.log(content); // 输出: "<p>这是一段段落。</p>"
 
// 替换元素内容
document.getElementById('myElement').innerHTML = '<p>这是一段新的段落。</p>';

3、innerText

innerText 是一个属性，用于获取或替换 HTML 元素的文本内容。与 innerHTML 不同，innerText 只处理文本内容，不会解析 HTML 标签。因此，如果你向 innerText 写入 HTML 标签，它们会被当作普通文本处理，而不是作为标签来解析。

示例：

javascript// 获取元素内容
var content = document.getElementById('myElement').innerText;
console.log(content); // 输出: "这是一段段落。"
 
// 替换元素内容
document.getElementById('myElement').innerText = '<p>这是一段新的段落。</p>';
// 实际上，这将在页面上显示为 "<p>这是一段新的段落。</p>"，而不是解析为段落。

总结：

• document.write 主要用于在文档加载期间动态生成 HTML，但现在已经不常用了。
• innerHTML 用于获取或替换 HTML 元素的内容，包括 HTML 标签。
• innerText 用于获取或替换 HTML 元素的文本内容，不会解析 HTML 标签。

在大多数情况下，推荐使用 innerHTML 或 innerText，因为它们提供了更多的灵活性和控制，而且不会像 document.write 那样可能导致预期之外的行为。