怎么使用JavaScript中write()

发布时间：2021-11-03 17:10:18 作者：iii
来源：亿速云阅读：167

# 怎么使用JavaScript中write()

JavaScript中的`document.write()`是一个基础但需要谨慎使用的方法，它可以直接向HTML文档流中写入内容。本文将详细介绍其用法、注意事项以及现代替代方案。

## 一、基本语法与功能

`document.write()`的语法非常简单：

```javascript
document.write(content);

其中content可以是： - 字符串（支持HTML标签） - 变量值 - 多类型组合（通过+连接）

基础示例

<script>
  document.write("<h1>Hello World</h1>");
  document.write("<p>当前时间：" + new Date() + "</p>");
</script>

二、使用场景分析

1. 页面加载时动态写入

在文档解析阶段使用会直接插入内容：

<body>
  <script>
    document.write("<div>这段内容会出现在body中</div>");
  </script>
</body>

2. 动态生成脚本

可以写入包含<script>标签的内容：

document.write('<script src="external.js"></script>');

三、重要注意事项

1. 仅适用于文档加载阶段

如果在页面加载完成后调用（如通过事件触发），会清空整个文档：

// 错误示范（会覆盖页面）
button.onclick = function() {
  document.write("这将替换整个页面！");
};

2. XSS风险

直接写入未转义的用户输入可能导致安全漏洞：

// 危险！可能执行恶意代码
document.write(userInput);

四、现代替代方案

1. DOM操作方法

更安全可控的方式：

// 创建元素
const div = document.createElement('div');
div.textContent = '动态内容';
document.body.appendChild(div);

// 或使用innerHTML（需注意XSS）
element.innerHTML = '<b>加粗文本</b>';

2. 模板字符串

ES6+推荐方式：

const title = "动态标题";
document.querySelector('#container').innerHTML = `
  <h2>${title}</h2>
  <p>${new Date().toLocaleString()}</p>
`;

五、特殊用例说明

延迟加载脚本

传统写法（现代建议用<script async/defer>替代）：

document.write('<script src="heavy.js"></script>');

兼容性提示

虽然所有浏览器都支持此方法，但在严格模式（’use strict’）下可能报错。

六、总结

特性	说明
即时性	立即写入文档流
便捷性	快速调试时有用
危险性	误用会清空页面
适用阶段	仅文档加载阶段

最佳实践建议： 1. 仅限简单原型或快速测试使用 2. 生产环境优先使用DOM API 3. 处理用户输入时务必转义内容

随着前端框架的普及，document.write()已逐渐成为遗留特性，理解其原理有助于更好地使用现代替代方案。 “`

注：实际字数为650字左右，可根据需要补充更多示例或注意事项扩展至700字。