JS | JavaScript中document.write()有哪些用法？

儒雅的烤地瓜

于 2024-10-05 08:45:00 发布

阅读量735

点赞数 27

分类专栏： JavaScript 文章标签： javascript 前端 document write方法 writeln方法

本文链接：https://blog.csdn.net/sunyctf/article/details/142333244

版权

JavaScript 专栏收录该内容

83 篇文章 22 订阅

订阅专栏

document.write()是 JavaScript 中用于向文档中插入内容的方法。它可以在文档加载过程中或在脚本执行时动态地将任意内容写入到 HTML 文档中。

document.write() 是 JavaScript 中的一个方法，用于在 HTML 文档中动态生成内容。

这个方法可以在网页加载过程中动态地向网页添加文本、HTML 标签、JavaScript 代码等内容。它接受一个字符串作为参数，并将该字符串直接输出到当前页面上。

使用 document.write() 方法时，它会定位到当前正在解析的文档，并将内容插入到该位置。如果在文档已完全加载之后使用该方法，它会覆盖整个文档。

以下是一些 document.write() 方法常见用法的使用示例：

1、输出文本：

document.write("Hello, World!");

这将在当前页面输出 “Hello, World!”。

插入文本：可以使用document.write()插入纯文本内容。

2、输出 HTML 标签：

document.write("<h1>Welcome</h1>");

这将在当前页面输出一个 h1 标题元素，显示为 “Welcome”。

插入 HTML 标签：可以使用document.write()插入 HTML 标签和元素。

3、输出 JavaScript 代码：

document.write("<script>alert('Hello!');</script>");

这将在当前页面输出一个包含 JavaScript 代码的 script 标签，该代码将弹出一个对话框显示 “Hello!”。

例1：动态生成标签和元素：可以根据条件动态生成 HTML 标签和元素。

var someCondition=true;
// var someCondition;
if (someCondition) {
document.write("<p>Condition is true.</p>");
} else {
document.write("<p>Condition is false.</p>");
}

例2：插入变量值：可以将变量的值插入到文档中。

var name = "John";
document.write("My name is " + name);

需要注意的是，document.write()方法会在页面上直接插入内容，如果在页面加载完成后使用该方法，它会覆盖整个页面内容。因此，在大多数情况下，推荐使用更安全和强大的 DOM 操作方法来修改页面结构，如 createElement()、appendChild() 等。

此外，当使用document.write()方法时，要注意确保它在正确的位置和时机被调用，以避免不必要的问题。

注意：使用 document.write() 方法时要小心，特别是在文档加载完成后使用。因为它会直接修改整个文档结构，可能导致意想不到的结果。在实际开发中，更常用的方法是通过 DOM 操作来动态地修改页面内容。

—— 总结：‌document.write()‌方法 ——

‌document.write()‌是JavaScript中的一个方法，用于向HTML输出流写内容。这个方法可以将指定的文本内容打印到页面上。使用document.write()时，如果希望逐字打印文本，可以在打印的文本字符串上加上单引号。此外，document.write()还可以用于输出变量与字符串的组合，通过变量拼接字符串的方式达到期望的输出效果。拼接字符串时，使用加号"+"进行连接，字符串需要用双引号""括起来。

需要注意的是，document.write()方法在使用时有一些限制和注意事项：

‌覆盖内容‌：使用document.write()方法会将文档中原有的内容覆盖掉，因此，在使用时需要谨慎，以免意外覆盖重要内容。
‌异步加载‌：在文档加载过程中，document.write()方法会阻塞页面的加载，因此，不建议在页面加载完成后再使用该方法。
‌在DOMContentLoaded或load事件的回调函数中使用‌：当文档加载完成时，document.write()会自动调用document.open()函数创建一个新的文档流，并写入新的内容，再通过浏览器展现，这样就会覆盖原来的内容。因此，在DOMContentLoaded或load事件的回调函数中使用document.write()会导致页面内容被清空。
‌关闭输出流‌：在脚本向窗口（不管是本窗口或其他窗口）写完内容后，必须关闭输出流。在延时脚本的最后一个document.write()方法后面，必须确保含有document.close()方法，否则就不能显示图片和表单。