document.write和innerHTML、innerText 的区别

本文涉及的产品
公共DNS(含HTTPDNS解析),每月1000万次HTTP解析
全局流量管理 GTM,标准版 1个月
云解析 DNS,旗舰版 1个月
简介: document.write和innerHTML、innerText 的区别

document.writeinnerHTML,和 innerText 都是 JavaScript 中用于操作 HTML 文档内容的方法,但它们之间有一些重要的区别。

1、document.write

document.write 是一个用于向 HTML 输出流写内容的方法。这个方法主要用于在文档加载期间动态生成 HTML。然而,如果 document.write 在文档加载完成后被调用,它会覆盖整个文档。因此,这个方法在现代的 web 开发中已经不常用了,因为它可能导致一些预期之外的行为。

示例:

document.write('<p>这是一段新的段落。</p>');

2、innerHTML

innerHTML 是一个属性,用于获取或替换 HTML 元素的内容(包括 HTML 标签)。当你读取 innerHTML 时,它会返回元素内部的 HTML 内容。当你向 innerHTML 写入内容时,它会替换元素内部的现有内容。

示例:

// 获取元素内容
var content = document.getElementById('myElement').innerHTML;
console.log(content); // 输出: "<p>这是一段段落。</p>"
 
// 替换元素内容
document.getElementById('myElement').innerHTML = '<p>这是一段新的段落。</p>';

3、innerText

innerText 是一个属性,用于获取或替换 HTML 元素的文本内容。与 innerHTML 不同,innerText 只处理文本内容,不会解析 HTML 标签。因此,如果你向 innerText 写入 HTML 标签,它们会被当作普通文本处理,而不是作为标签来解析。

示例:

javascript// 获取元素内容
var content = document.getElementById('myElement').innerText;
console.log(content); // 输出: "这是一段段落。"
 
// 替换元素内容
document.getElementById('myElement').innerText = '<p>这是一段新的段落。</p>';
// 实际上,这将在页面上显示为 "<p>这是一段新的段落。</p>",而不是解析为段落。

总结:

  • document.write 主要用于在文档加载期间动态生成 HTML,但现在已经不常用了。
  • innerHTML 用于获取或替换 HTML 元素的内容,包括 HTML 标签。
  • innerText 用于获取或替换 HTML 元素的文本内容,不会解析 HTML 标签。

在大多数情况下,推荐使用 innerHTMLinnerText,因为它们提供了更多的灵活性和控制,而且不会像 document.write 那样可能导致预期之外的行为。

目录
打赏
0
5
5
1
64
分享
相关文章
|
8月前
uniapp项目实践第四章:如何安装uni-ui组件库
uniapp项目实践第四章:如何安装uni-ui组件库
540 0
乾坤qiankun框架搭建 主应用为vue3的项目。
乾坤qiankun框架搭建 主应用为vue3的项目。
239 2
如何在 Vue 项目中配置 Tree Shaking?
通过以上针对 Webpack 或 Rollup 的配置方法,就可以在 Vue 项目中有效地启用 Tree Shaking,从而优化项目的打包体积,提高项目的性能和加载速度。在实际配置过程中,需要根据项目的具体情况和需求,对配置进行适当的调整和优化。
程序调用大模型返回结构化输出(JSON)
本文介绍了如何使用讯飞星火大模型API,并通过Python封装实现结构化数据输出。首先,通过封装SparkAI类,实现了与讯飞星火API的交互,确保了调用的安全性和便捷性。接着,利用Pydantic库定义了数据模型`CalendarEvent`,确保从大模型获取的回答能够被正确解析成预设的结构化JSON格式,从而解决了大模型回答不规范的问题。示例代码展示了如何构造请求、接收并解析响应,最终输出结构化的活动信息。
221 3
原生JS实现一键复制,一键粘贴
原生JS实现一键复制,一键粘贴
94 0
|
8月前
|
如何给Vue项目指定端口号
如何给Vue项目指定端口号
124 0
JavaScript学习 -- fetch的使用
JavaScript学习 -- fetch的使用
150 0
AI助理

你好,我是AI助理

可以解答问题、推荐解决方案等