当前位置: 首页 > news >正文

js中写文档write和innerHTML的区别

document.write是直接写入到页面的内容流,如果在写之前没有调用document.open, 浏览器会自动调用open。每次写完关闭之后重新调用该函数,会导致页面被重写


innerHTML则是DOM页面元素的一个属性,代表该元素的html内容。你可以精确到某一个具体的元素来进行更改。如果想修改document的内容,则需要修改document.documentElement.innerElement。
innerHTML将内容写入某个DOM节点,不会导致页面全部重绘


innerHTML很多情况下都优于document.write,其原因在于其允许更精确的控制要刷新页面的那一个部分。


1.write是DOM方法,向文档写入HTML表达式或JavaScript代码,可列出多个参数,参数被顺序添加到文档中 ;innerHTML是DOM属性,设置或返回调用元素开始结束标签之间的HTML元素。
2.两者都可向页面输出内容,innerHTML比document.write更灵活。
当文档加载时调用document.write直接向页面输出内容,文档加载结束后调用document.write输出内容会重写整个页面。通常按照两种的方式使用 write() 方法:一是在使用该方在文档中输出 HTML,二是在调用该方法的的窗口之外的窗口、框架中产生新文档(务必使用close关闭文档)。
在读模式下,innerHTML属性返回与调用元素的所有子节点对应的HTML标记,在写模式下,innerHTML会根据指定的值创建新的DOM树替换调用元素原先的所有子节点。
3.两者都可动态包含外部资源如JavaScript文件
通过document.write插入script元素会自动执行其中的脚本;
大多数浏览器中,通过innerHTML插入script元素并不会执行其中的脚本。

欢迎访问我的个人博客–付博瀚的个人博客

相关文章:

  • React 16 Jest ES6 Class Mocks(使用ES6语法类的模拟) 实例二
  • 拉格朗日乘子
  • FE协同中流程无法提交
  • 《大道至简》读后感
  • mui集成微信H5支付(返回白屏问题已经解决)
  • JVM学习笔记二:内存结构规范
  • React Native中获取屏幕的宽高、分辨率
  • POI技术
  • 微信公众号之模板消息使用
  • Windows Unity ARKit发布到IOS相关设置及错误解决
  • Spring配置补充
  • 基于 HTML5 结合互联网+ 的 3D 隧道
  • Ligowave无线网桥15级手拉手链路设计及稳定性保障
  • JAVAOOP异常
  • RxJava mini
  • [译]CSS 居中(Center)方法大合集
  • 「面试题」如何实现一个圣杯布局?
  • 【MySQL经典案例分析】 Waiting for table metadata lock
  • 【Under-the-hood-ReactJS-Part0】React源码解读
  • CentOS 7 修改主机名
  • CSS魔法堂:Absolute Positioning就这个样
  • ECMAScript 6 学习之路 ( 四 ) String 字符串扩展
  • GDB 调试 Mysql 实战(三)优先队列排序算法中的行记录长度统计是怎么来的(上)...
  • github指令
  • IIS 10 PHP CGI 设置 PHP_INI_SCAN_DIR
  • iOS帅气加载动画、通知视图、红包助手、引导页、导航栏、朋友圈、小游戏等效果源码...
  • java正则表式的使用
  • js算法-归并排序(merge_sort)
  • macOS 中 shell 创建文件夹及文件并 VS Code 打开
  • markdown编辑器简评
  • SpiderData 2019年2月16日 DApp数据排行榜
  • spring + angular 实现导出excel
  • vue脚手架vue-cli
  • 闭包--闭包作用之保存(一)
  • 从伪并行的 Python 多线程说起
  • 两列自适应布局方案整理
  • 每个JavaScript开发人员应阅读的书【1】 - JavaScript: The Good Parts
  • 如何正确配置 Ubuntu 14.04 服务器?
  • 手机端车牌号码键盘的vue组件
  • 源码之下无秘密 ── 做最好的 Netty 源码分析教程
  • 06-01 点餐小程序前台界面搭建
  • ionic异常记录
  • ​DB-Engines 11月数据库排名:PostgreSQL坐稳同期涨幅榜冠军宝座
  • (11)工业界推荐系统-小红书推荐场景及内部实践【粗排三塔模型】
  • (NO.00004)iOS实现打砖块游戏(十二):伸缩自如,我是如意金箍棒(上)!
  • (附源码)ssm航空客运订票系统 毕业设计 141612
  • (附源码)计算机毕业设计SSM教师教学质量评价系统
  • (四)c52学习之旅-流水LED灯
  • (转)iOS字体
  • (转载)CentOS查看系统信息|CentOS查看命令
  • .NET Core Web APi类库如何内嵌运行?
  • .NET Core 通过 Ef Core 操作 Mysql
  • .Net FrameWork总结
  • .NET 使用 JustAssembly 比较两个不同版本程序集的 API 变化
  • .Net中的设计模式——Factory Method模式