js中documen.write 和 innerHTML 的区别

documen.write 应该是 document.write。下面是关于 document.write 和 innerHTML 的区别和例子的详细说明：

document.write

document.write 是 JavaScript 中用于将文本或 HTML 写入到页面的方法。当它在页面加载期间调用时，它会将内容添加到文档中当前的位置。然而，如果在文档完全加载后使用 document.write，它会覆盖整个页面的内容。

缺点：

如果在文档加载后使用，会覆盖整个页面的内容。

阻塞页面渲染，可能导致页面加载缓慢。

示例：

javascript

document.write("<p>这是一个通过 document.write 插入的段落。</p>");

如果在文档加载后执行此代码，它会覆盖整个页面的内容。因此，现代 web 开发中很少使用 document.write，因为它很容易引发问题。

innerHTML

innerHTML 是一个属性，它获取或设置 HTML 元素的内容。通过修改元素的 innerHTML，你可以动态地更改元素内部的 HTML 结构，而不会影响到页面的其他部分。

优点：

可以针对特定的元素进行内容更新。

不会覆盖整个页面的内容。

不会阻塞页面渲染。

示例：

javascript

var element = document.getElementById("myElement");

element.innerHTML = "<p>这是一个通过 innerHTML 插入的段落。</p>";

在这个例子中，我们首先通过 getElementById 获取了一个元素，然后设置了它的 innerHTML 属性，从而更改了该元素的内容。只有 myElement 这个元素的内容会被更改，页面的其他部分不会受到影响。

何时使用哪个？

不要使用 document.write：在现代 web 开发中，几乎总是应该避免使用 document.write，因为它可能会覆盖页面内容，并且会阻塞页面渲染。

使用 innerHTML：当你需要动态地更改页面上的特定元素的内容时，应该使用 innerHTML。不过，请注意，直接设置 innerHTML 可能会导致 XSS（跨站脚本攻击）安全问题，因此在设置内容时应该确保内容的安全性。

在实际开发中，通常会使用更现代、更安全的 DOM 操作方法来动态创建和更新页面内容，例如 createElement、appendChild、textContent 等。这些方法提供了更精细的控制，并且通常更加高效和安全。