首页 > 其他分享 >document.write和innerHTML有什么区别?

document.write和innerHTML有什么区别?

时间:2024-11-25 09:13:29浏览次数:8  
标签:写入 innerHTML write HTML document 页面

document.writeinnerHTML 都是用于操作网页内容的 JavaScript 方法,但它们的工作方式和适用场景有很大的区别:

document.write():

  • 写入时机: document.write() 会直接写入到文档流中。如果在页面加载完成后调用,它会先清空整个文档,然后再写入内容。 这通常会导致页面闪烁并重新加载所有资源,因此在页面加载完成后使用 document.write() 通常是不推荐的。 主要用于在页面加载过程中动态生成内容,或者用于向新打开的窗口写入内容。

  • 写入方式: 将字符串形式的内容直接写入文档。它不会解析 HTML 标签,而是将它们作为纯文本输出。 除非字符串本身包含 HTML 标签。

  • 适用场景:

    • 动态生成页面内容(例如,根据用户输入或其他条件生成不同的内容)。 但现在通常用更现代的方法,例如操作 DOM。
    • 向新打开的窗口写入内容。
    • 一些简单的动态广告插入 (虽然现在也不推荐)。

innerHTML:

  • 写入时机: innerHTML 可以随时修改元素的内容,而不会导致整个页面重新加载。它会替换指定元素的现有内容。

  • 写入方式: 将字符串解析为 HTML 或 XML,并将其插入到指定的元素中。 这使得可以动态创建和修改 HTML 元素及其内容。

  • 适用场景:

    • 动态更新页面内容,例如根据用户交互或数据更新来改变部分页面内容。
    • 创建新的 HTML 元素并将其插入到 DOM 中。
    • 操作现有 HTML 元素的属性和样式。

总结:

特性 document.write() innerHTML
写入时机 页面加载过程中或覆盖整个文档 随时,替换指定元素内容
写入方式 直接写入字符串,不解析 HTML (除非字符串包含HTML标签) 解析 HTML 或 XML 并插入
性能 页面加载后使用会导致页面重载,性能较差 性能较好,不会导致页面重载
适用场景 页面加载中动态生成内容, 向新窗口写入内容 动态更新页面内容,创建/修改 HTML 元素
推荐程度 除非特殊情况,一般不推荐 推荐用于动态操作 HTML 内容

示例:

<!DOCTYPE html>
<html>
<head>
<title>document.write vs innerHTML</title>
</head>
<body>

<div id="myDiv">Original content</div>

<script>
// 使用 innerHTML 修改 div 内容
document.getElementById("myDiv").innerHTML = "<b>New content</b> using innerHTML";

//  如果在页面加载完成后使用 document.write,会清空页面并重新写入
// document.write("This will replace the entire page!"); 
</script>

</body>
</html>

总而言之,innerHTMLdocument.write() 更灵活、更安全、性能更好,并且更适合现代 Web 开发。 除非有非常特定的需求,否则应该避免使用 document.write()

标签:写入,innerHTML,write,HTML,document,页面
From: https://www.cnblogs.com/ai888/p/18566860

相关文章

  • HTB:WifineticTwo[WriteUP]
    目录连接至HTB服务器并启动靶机信息搜集使用rustscan对靶机TCP端口进行开放扫描使用nmap对靶机开放端口进行脚本、服务扫描使用curl访问靶机8080端口使用浏览器直接访问/login路径漏洞利用使用searchsploit搜索该WebAPP漏洞PayloadUSER_FLAG:bb4486cda052880dad71c535......
  • Java中的List集合:从ArrayList到CopyOnWriteArrayList
    目录1.List接口简介2.ArrayList2.1基本特性2.2内部实现2.3扩容机制2.4性能考虑2.5代码示例3.LinkedList3.2内部实现3.3性能考虑3.4代码示例4.Vector4.1特性4.2与ArrayList的比较4.3代码示例5.Collections.synchronizedList5.1特性5.2实现原理5.3使......
  • Sigrity SPEED2000 DDR simulation模式如何生成和解读DDR仿真报告-SODIMM-Write模式
    SigritySPEED2000DDRsimulation模式如何生成和解读DDR仿真报告-SODIMM-Write模式SigritySPEED2000DDRsimulation模式如何进行DDR仿真分析操作指导-SODIMM-Write模式详细介绍了如何进行DDRWrite模式的仿真分析,下面基于此仿真结果进行DDR报告的输出和解读分析在workfl......
  • 【CTF Web】Pikachu 不安全的url跳转 Writeup(URL重定向+代码审计)
    不安全的url跳转不安全的url跳转问题可能发生在一切执行了url地址跳转的地方。如果后端采用了前端传进来的(可能是用户传参,或者之前预埋在前端页面的url地址)参数作为了跳转的目的地,而又没有做判断的话就可能发生"跳错对象"的问题。url跳转比较直接的危害是:–>钓鱼,......
  • 【CTF Web】Pikachu SSRF(curl) Writeup(SSRF+读取文件+探测端口)
    SSRF(Server-SideRequestForgery:服务器端请求伪造)其形成的原因大都是由于服务端提供了从其他服务器应用获取数据的功能,但又没有对目标地址做严格过滤与限制导致攻击者可以传入任意的地址来让后端服务器对其发起请求,并返回对该目标地址请求的数据数据流:攻击者-----......
  • WriteUp - 江苏省领航杯 CTF 2024
    文章目录一、前言二、MISC高职组1、签到2、BASE拓展3、PG本科组1、签到2、veee3、seeme三、WEB高职组1、aio2、robots3、web_sql_xxe本科组1、web_sql_xxe2、提权3、acxi拓展四、CRYPTO高职组1、兔兔2、1zRSA本科组1、兔兔2、Evaluate五、REVERSE高职组1、eas......
  • HTB:Jerry[WriteUP]
    目录连接至HTB服务器并启动靶机1.WhichTCPportisopenontheremotehost?2.Whichwebserverisrunningontheremotehost?Lookingfortwowords.3.WhichrelativepathonthewebserverleadstotheWebApplicationManager?4.Whatisthevalidusername......
  • HTB:Lame[WriteUP]
    目录连接至HTB服务器并启动靶机1.Howmanyofthenmaptop1000TCPportsareopenontheremotehost?2.WhatversionofVSFTPdisrunningonLame?3.ThereisafamousbackdoorinVSFTPdversion2.3.4,andaMetasploitmoduletoexploitit.Doesthatexploi......
  • HTB:Legacy[WriteUP]
    目录连接至HTB服务器并启动靶机1.HowmanyTCPportsareopenonLegacy?2.Whatisthe2008CVEIDforavulnerabilityinSMBthatallowsforremotecodeexecution?3.WhatisthenameoftheMetasploitmodulethatexploitsCVE-2008-4250?4.WhenexploitingM......
  • 前端学习第四天笔记 函数 对象 math对象 Date对象 DOM概述 document对象的获取元素、
    文章目录函数函数的声明函数名的提升对象math对象Math.abs()Math.max()和Math.min()Math.floor()和Math.ceil()Math.random()Date对象Date.now()Date对象中的Get方法DOM概述节点节点树Node.nodeType属性document对象_方法/获取元素document.getElementsByTagName()do......