Document.write()的使用

最新推荐文章于 2025-07-06 17:00:00 发布
原创 最新推荐文章于 2025-07-06 17:00:00 发布 · 2.1k 阅读 · 3 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#js

本文讲解了如何使用document.write()函数在HTML文档中插入文本。特别强调了在文档加载完成后使用此函数会覆盖整个HTML页面。通过一个示例展示了在按钮点击事件中调用此函数的效果。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

使用document.write()仅仅是向文本档输入想要写的内容

注：如果在文档已完成加载后执行 document.write，整个 HTML 页面将被覆盖

例如：

<!DOCTYPE html>
<html>
<body>

<h1>这是一张网页</h1>

<p>我这是一个段落。</p>

<button onclick="myFunction()">点击这里</button>

<script>
function myFunction()
{
document.write("文本消失了");
}
</script>

</body>
</html>

在这里插入图片描述
在这里插入图片描述

document.write和writeln的输出内容区别
laugh666的博客
10-06 606
document.write和writeln是JavaScript中用于将文本或HTML代码输出到网页中的方法。这意味着如果在页面加载完成后使用document.write，它将覆盖整个文档，包括HTML、CSS和其他JavaScript代码。writeln是document对象的一个方法，它与document.write类似，但会在每个输出后添加一个换行符。JavaScript中的document.write和writeln是用于将文本或HTML代码输出到网页中的方法。
JS | JavaScript中document.write()有哪些用法？
青春木鱼的博客
10-05 2959
document.write()是 JavaScript 中用于向文档中插入内容的方法。它可以在文档加载过程中或在脚本执行时动态地将任意内容写入到 HTML 文档中。需要注意的是，document.write()方法会在页面上直接插入内容，如果在页面加载完成后使用该方法，它会覆盖整个页面内容。因此，在大多数情况下，推荐使用更安全和强大的 DOM 操作方法来修改页面结构，如 createElement()、appendChild() 等。此外，当使用document.write()方法时，要注意确保它在正
document.write()的用法
limengyu_xmy的博客
09-04 1万+
一、定义和用法 文档节点的write()方法用于写入文档内容，可以传多个参数，写入的字符串会按HTML解析。 语法：document.write() 参数：字符串，可以传多个字符串参数 返回值：undefined   二、注意事项 如果document.write()在DOMContentLoaded或load事件的回调函数中，当文档加载完成，则会先清空文档（自动调用document.open()），再把参数写入body内容的开头。 在异步引入的js和DOMContentLoaded或load事件
document.write()
weixin_30718391的博客
03-01 271
document.write() CreateTime--2018年3月1日17:43:16 Author:Marydon 用途：在指定位置末尾输出内容 用法： 　　1.输出文本； 　　2.输出HTML标签； 　　3.可以携带多个参数。 缺点：会将原文中的内容覆盖掉 演示 代码展示 界面展示 如何避免覆盖原文内容呢？ 　　在要展示的位置输出 &l...
深入解析 document.write、innerHTML 和 innerText 的区别
最新发布
jht_520的博客
07-06 821
是三种常用的方法，但它们的用途、性能和安全机制截然不同。本文将深入解析三者的区别，助你避免常见陷阱，写出更高效的代码。频繁修改会触发重排（Reflow）和重绘（Repaint），大范围更新时建议用。在 JavaScript 中，操作 DOM 是实现动态页面的关键。修改时仅触发文本节点的更新，比重排整个 DOM 更高效。用户输入展示（如评论、消息框）、无需格式的文本更新。：安全高效的“文本卫士”，适合用户内容展示。同步写入内容，会阻塞页面解析，影响性能。动态插入带格式的内容（如富文本渲染）。
关于document.write
weixin_30851867的博客
08-21 1382
document.write的用处 document.write是JavaScript中对document.open所开启的文档流(document stream操作的API方法，它能够直接在文档流中写入字符串，一旦文档流已经关闭，那document.write就会重新利用document.open打开新的文档流并写入，此时原来的文档流会被清空，已渲染好的页面就会被清除，浏览器将重新构建DOM并渲...
document write()的用法与注意事项
我是张跑跑
09-26 5943
1 概述 document.write() 方法可向文档写入 HTML 表达式或 JavaScript 代码。 可列出多个参数(exp1,exp2,exp3,…) ，它们将按顺序被追加到文档中，默认情况是不会换行的。 我们通常按照两种的方式使用 write() 方法：一是在使用该方在文档中输出 HTML，另一种是在调用该方法窗口之外的窗口。在第二种情况中，请务必使用 close() 方法来关闭文档...
document.write详解
qq_44007331的博客
08-09 2144
document.write使用小记
window.open配合document.write实现图片预览而非下载
m0_63026408的博客
07-12 1462
点击事件后要 打开新窗口 预览图片（png，jpg--图片类型不是pdf或者文档）window.open()方法与document.write()方法结合。打开指定URL的页面。如果没有指定URL，打开一个新的空白窗口。
document.write is not allowed in a script tag(解决方案).md
08-29
document.write is not allowed in a script tag(解决方案).md
document.write is not allowed in a style tag(解决方案).md
08-29
document.write is not allowed in a style tag(解决方案).md
document.write的用处
weixin_30299539的博客
06-06 171
document.write -----能够直接在文档流中写入字符串 <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-wi...
学习document.write()
wulong710的专栏
11-15 523
在header中写document.write，则是在各个控件载入前写入，不会覆盖掉以前的控件们。 <!DOCTYPE html> <html> <head> <title>测试2</title> <meta charset="utf-8"> <script type="text/javascript"> // header中写入 // setInterval(function
document write.md
small_ma
09-29 562
document.write 我们都很熟悉，document.write用于向document.open打开的文档流中写入内容。 但是document.write很可能会造成文档的重写 我们先来补充一些理论知识： 如果document.write向文档流中写入内容时，文档流没有打开。那么document.write会自动调用document.open打开文档流 如果在文档加载完毕后调用docum...
JavaScript中document的write()的一个使用细节
weixin_43729854的博客
04-07 2028
最近在做一个微信小程序，之中用到了html,CSS,JS这些方面的知识，我一直觉得前端很好玩，就开始学习JS方面的知识。 因为是初学，直接很全面地概括JS目前做不到，我就把学习中的点滴与大家分享。 这里谈一下Java Script中document.write()的一个使用细节: 如果在文档已完成加载后执行 document.write，整个 HTML 页面将被覆盖。 直接举例说...
document。write的使用
LS
12-05 200
文档加载成功前/后使用的区别
document中的write用法
热门推荐
wei_ke_zhi的博客
08-28 3万+
一、document.write()运行原理      首先我们先了解一下这条语句运行的原理：              document.write()是Javascript中对document.open()所开启的文档流操作的API方法。              它能够直接砸文档流中写入字符串，一旦文档流已经关闭，那么 document.write()就会重新运用document.open...
document.write("")和document.write(``)区别
06-14
<think>我们正在讨论JavaScript中document.write方法使用双引号与模板字符串（反引号）的区别。根据提供的引用资料，我们可以总结如下：1.**双引号字符串**：传统的字符串表示方式，使用双引号括起来。在双引号字符串中，如果需要嵌套双引号，必须使用转义符`\"`。同样，双引号字符串不支持多行字符串，也不支持直接在字符串中嵌入变量（需要通过加号`+`拼接）。-示例：`document.write("Hello"+name+"!");`（其中`name`是变量）2.**模板字符串（反引号）**：ES6引入的新特性，使用反引号（`````）括起来。模板字符串支持多行字符串，并且可以直接在字符串中嵌入变量或表达式，使用`${}`语法。-示例：``document.write(`Hello${name}!`);``**主要区别**：1.**变量嵌入**：-双引号：必须使用字符串拼接（加号`+`）来连接变量和字符串。-模板字符串：可以直接通过`${变量}`的方式嵌入变量，更加简洁。2.**多行字符串**：-双引号：不能直接换行，如果字符串需要换行，必须使用换行符`\n`或者将字符串拆分为多行并用加号连接。-模板字符串：可以直接换行，保留字符串中的换行格式。3.**引号嵌套**：-双引号：内部如果出现双引号，需要转义（`\"`）。-模板字符串：内部可以直接使用双引号和单引号，无需转义（除非出现反引号，则需用`\`转义）。4.**转义字符**：-两者都支持转义字符，但模板字符串中如果出现反引号，需要用`\`转义（如``\```）。5.**标签模板**（高级用法）：-模板字符串还支持标签模板功能（这里不展开，因为与`document.write`的基本使用关系不大）。**示例对比**：假设有一个变量`name="Alice"`，我们想输出：`HelloAlice!`。-使用双引号：```javascriptdocument.write("Hello"+name+"!");```-使用模板字符串：```javascriptdocument.write(`Hello${name}!`);```**多行字符串示例**：-使用双引号：```javascriptdocument.write("第一行\n第二行");```-使用模板字符串：```javascriptdocument.write(`第一行第二行`);```**注意事项**：-在`document.write`中使用模板字符串时，如果模板字符串中包含用户输入的内容，需要注意防范XSS攻击（因为模板字符串不会自动转义HTML特殊字符，和双引号字符串一样）。-模板字符串是ES6特性，在较旧的浏览器（如IE11及以下）中不被支持。如果项目需要兼容旧浏览器，应避免使用模板字符串或使用转译工具（如Babel）进行转换。综上所述，模板字符串在可读性和便捷性上优于双引号字符串，尤其是在需要嵌入变量和多行字符串的情况下。但在兼容性要求高的环境中，双引号字符串仍是更安全的选择。§§相关问题§§1.在JavaScript中，除了`document.write`，还有哪些输出内容到页面的方法？2.模板字符串在哪些场景下比传统字符串更有优势？3.如何在使用模板字符串时防止XSS攻击？4.如何让旧版浏览器（如IE11）支持模板字符串？</think>### JavaScript 中 `document.write` 使用双引号与模板字符串的区别 在 JavaScript 中，`document.write()` 用于向 HTML 文档输出内容。双引号 `""` 和模板字符串（反引号 `` ` ``）的主要区别如下： #### 1. **变量嵌入方式** - **双引号**：需用 `+` 拼接变量和字符串 ```javascript const name = "Alice"; document.write("Hello, " + name + "!"); // 输出：Hello, Alice! ``` - **模板字符串**：直接通过 `${}` 嵌入变量 ```javascript const name = "Alice"; document.write(`Hello, ${name}!`); // 输出：Hello, Alice! ``` > **优势**：模板字符串避免繁琐的拼接，提高可读性[^4]。 #### 2. **多行字符串支持** - **双引号**：不支持直接换行，需用 `\n` 或拼接 ```javascript document.write("第一行\n第二行"); ``` - **模板字符串**：直接保留换行格式 ```javascript document.write(`第一行 第二行`); // 输出两行文本 ``` > **优势**：模板字符串简化多行文本的输出[^4]。 #### 3. **引号嵌套处理** - **双引号**：内部嵌套双引号需转义 `\"` ```javascript document.write("She said: \"Hello!\""); // 输出：She said: "Hello!" ``` - **模板字符串**：可直接包含双引号或单引号 ```javascript document.write(`She said: "Hello!"`); // 无需转义 ``` > **注意**：模板字符串中需用 `\`` 转义反引号本身[^4]。 #### 4. **表达式计算** - **双引号**：无法直接计算表达式 ```javascript document.write("结果: " + (5 + 3)); // 需显式计算 ``` - **模板字符串**：支持 `${}` 内嵌表达式 ```javascript document.write(`结果: ${5 + 3}`); // 输出：结果: 8 ``` > **优势**：模板字符串支持动态计算[^4]。 #### 5. **转义字符** - **双引号**：支持标准转义符（如 `\n`, `\"`） - **模板字符串**：支持所有转义符，且提供标签模板等高级功能（此处不展开）。 --- ### 使用建议 1. **优先模板字符串**： 简化变量嵌入、多行文本和表达式计算，提升代码可读性。 2. **兼容性考虑**： 模板字符串是 ES6 特性，需确保目标环境支持（现代浏览器均支持）。 3. **特殊场景**： 若需兼容旧版 IE 或严格避免转义，可保留双引号拼接方式。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值