document.write和innerHTML、innerText 的区别?

简介: document.write和innerHTML、innerText 的区别?


  1. document.write:
  • document.write 是一个方法,用于向文档中写入内容。
  • 它可以直接在 HTML 文档中使用,将内容直接输出到页面上。
  • 但是,如果在页面加载完成后再使用 document.write 方法,它会覆盖整个文档内容,可能会导致页面结构混乱。
  • 2.innerHTML:
  • innerHTML 是一个属性,用于获取或设置元素的 HTML 内容。
  • 可以通过 innerHTML 属性来改变元素的内容,而不会影响元素本身。
  • innerHTML 只能用于 HTML 元素,不能用于文档节点。
  • 3.innerText:
  • innerText 是一个属性,用于获取或设置元素的文本内容。
  • innerText 会忽略元素中的 HTML 标签,只返回文本内容。
  • innerText 适用于需要处理纯文本内容的情况,但在某些情况下可能会受到浏览器的支持程度影响。
<!DOCTYPE html>
<html>
<head>
    <title>Document.write vs innerHTML vs innerText</title>
</head>
<body>
    <div id="output"></div>
 
    <script>
        // 使用 document.write
        document.write("Hello, document.write!");
 
        // 使用 innerHTML
        document.getElementById("output").innerHTML = "<p>Hello, innerHTML!</p>";
 
        // 使用 innerText
        document.getElementById("output").innerText = "Hello, innerText!";
    </script>
</body>
</html>

     document.write 用于向文档中写入内容,会直接输出到页面上,可能会导致页面结构混乱。          innerHTML 和 innerText 用于获取或设置元素的内容,innerHTML 可以处理 HTML 内容,而 innerText 只处理纯文本内容

相关文章
|
7月前
TortoiseSVN使用-合并分支代码
TortoiseSVN使用-合并分支代码
570 1
|
JavaScript
判断一个对象为空对象的方法
判断一个对象为空对象的方法
287 4
|
10月前
|
SQL 缓存 PHP
MBTI十六型人格职业性格测试源码完整版
MBTI十六型人格职业性格测试源码完整版
935 12
|
开发工具 git
Stylelint——Unexpected unknown pseudo-class selector ":deep" selector-pseudo-class-no-unknown
新项目制定规范接入了stylelint,并通过husky在git提交时去触发检测修复,使用`:deep()`的时候却发现了报错;
509 1
|
Linux 数据安全/隐私保护 Python
Linux下远程访问Jupyter Notebook 配置
Linux下远程访问Jupyter Notebook 配置
389 1
|
SQL 关系型数据库 MySQL
在 MySQL 中使用 `REPLACE` 函数
【8月更文挑战第8天】
2005 7
在 MySQL 中使用 `REPLACE` 函数
|
存储 SQL 缓存
优化ClickHouse查询性能:最佳实践与调优技巧
【10月更文挑战第26天】在大数据分析领域,ClickHouse 以其卓越的查询性能和高效的列式存储机制受到了广泛的关注。作为一名已经有一定 ClickHouse 使用经验的开发者,我深知在实际应用中,合理的表设计、索引优化以及查询优化对于提升 ClickHouse 性能的重要性。本文将结合我的实践经验,分享一些有效的优化策略。
1588 3
|
API Android开发 开发者
Android经典实战之使用ViewCompat来处理View兼容性问题
本文介绍Android中的`ViewCompat`工具类,它是AndroidX库核心部分的重要兼容性组件,确保在不同Android版本间处理视图的一致性。文章列举了设置透明度、旋转、缩放、平移等功能,并提供了背景色、动画及用户交互等实用示例。通过`ViewCompat`,开发者可轻松实现跨版本视图操作,增强应用兼容性。
500 5
|
Java 开发者 UED
【揭秘Java编程新境界】事件驱动:如何在Java中捕捉每一个关键瞬间?
【8月更文挑战第30天】事件驱动编程是一种编程范式,使程序能在事件发生时响应,而非按严格顺序执行。本文介绍Java中的事件驱动编程,包括基本概念、优势及其实现方法。通过事件监听器和事件对象,Java能够高效处理GUI、网络编程和游戏开发中的各种事件。文中还提供了创建事件监听器、自定义事件及处理多个事件源的示例代码,帮助读者更好地理解和应用这一强大的编程范式。
323 1
|
iOS开发 MacOS Windows
Axure下载及汉化激活
Axure RP 9 的下载、汉化及激活方法。首先从官网下载并安装最新版 Axure RP 9,然后下载并解压语言包,将「lang」文件夹复制到 Axure 安装目录中。Windows 系统路径为 `c://Program Files/Axure/Axure RP 9.0/` 或 `c://Program Files (x86)/Axure/Axure RP 9.0/`,macOS 系统需通过“显示包内容”操作进行粘贴。最后使用提供的激活码完成激活。
1788 0