在document.write()中调用JavaScript函数

document.write() 是 JavaScript 中的一个方法，用于将文本或 HTML 插入到当前文档中。这个方法通常在页面加载时使用，但也可以在任何时候调用以动态更改页面内容。然而，document.write() 在现代 web 开发中并不推荐使用，因为它会覆盖整个文档的内容，如果在文档加载完成后调用，会导致页面重新加载。

基础概念

document.write(): 这是一个 JavaScript 函数，用于向 HTML 输出流写入内容。它可以动态地改变当前文档的内容。

类型

字符串内容：可以直接写入字符串。
变量内容：可以将变量的值写入文档。
函数返回值：可以调用函数，并将返回值写入文档。

应用场景

简单的动态内容插入：在不支持更现代的前端框架或库的情况下，可以使用 document.write() 来插入简单的动态内容。

遇到的问题及原因

页面重新加载：如果在文档加载完成后调用 document.write()，它会清空当前文档并重新开始写入，导致页面重新加载。
阻塞渲染：document.write() 会阻塞页面的渲染，直到所有内容都被写入。
不易维护：使用 document.write() 编写的代码难以维护和调试，因为它会直接修改 HTML 结构。

解决问题的方法

现代 web 开发中推荐使用 DOM 操作方法来动态更改页面内容，例如 document.createElement(), appendChild(), innerHTML 等。这些方法更加灵活，不会导致页面重新加载，也不会阻塞页面渲染。

示例代码

// 不推荐的方式
document.write('<p>Hello, World!</p>');

// 推荐的方式
var p = document.createElement('p');
p.textContent = 'Hello, World!';
document.body.appendChild(p);