innerHTML才是王道,其它动态修改HTML都是异步

最新推荐文章于 2021-07-06 23:28:05 发布
原创 最新推荐文章于 2021-07-06 23:28:05 发布 · 888 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#html #ie

本文探讨了在IE6浏览器中使用addoption方法动态添加select元素子项的问题。实验发现，添加子项并立即设置为选中状态会导致错误。原因是页面渲染未同步完成。使用innerHTML则可以避免此问题。
在IE6下做了个试验,用addoption的方法动态的添加select的子项,添加完后,迅速将某一子项设为选择状态,发现会报错,分析是因为,代码虽然添加了子项,但页网实际上并没有同步渲染,所以就锁定不到子项.用innerHTML就可以
JavaScript 异步的 innerHTML 使用分析
TechNovaX的博客
09-28 168
在 JavaScript 中，异步的 innerHTML 使用需要注意异步操作的顺序性、安全性问题和性能问题。通过遵循这些最佳实践，我们可以更好地处理异步的 innerHTML 使用，并确保代码的正确性、安全性和性能。然而，如果我们在异步操作中使用 innerHTML，就需要小心处理，以确保正确的更新和避免潜在的问题。在这个例子中，我们使用文档片段来创建一组新的元素，并将它们添加到具有 id “container” 的元素中。在这个例子中，我们使用 DOMPurify 库来过滤通过异步操作获取的数据。
对于比较大的页面innerHTML或appendChild要避免
ang639
04-28 1814
我们经常会通过JS来对页面布局进行调整。然而，对于比较大的部分最好避免调整，比如innerHTML或appendChild进行位置调整。因为在调整的过程中，浏览器会对这些变动的部位进行重新刷新，其HTML比较大时浏览器解析就很慢，然后会导致页面的明显抖动。
html事件是异步的吗,javascript – innerHTML是异步的吗？
weixin_42538752的博客
06-10 339
设置innerHTML是同步的,您可以对DOM进行大多数更改.但是,呈现网页是一个不同的故事.(请记住,DOM代表“文档对象模型”.它只是一个“模型”,一个数据表示.用户在屏幕上看到的是该模型应该如何看的图片.因此,更改模型不会立即改变图片 – 需要一些时间来更新.)运行JavaScript并呈现网页实际上是分开进行的.简单地说,首先运行页面上的所有JavaScript(从事件循环 – 查看thi...
ajax异步刷新邂逅了你—innerHTML
等待着雨水,茁壮成长--李建敏
12-19 1834
innerHTML这个属性做过ITOO项目的应该都不陌生，用来设置或获取位于对象起始和结束标签内的HTML。（获取HTML当前标签的起始和结束里面的内容）， 经常利用它实现信息的动态显示。在项目中进行Ajax异步刷新时才刚刚接触到，这里面还有一段小插曲： 异步刷新 欢迎您: @Session["username"] 总积分:    setInterval(functio
javascript 异步的innerHTML使用分析
12-11
当然，这个分时加载技术只是一个辅助技术，本身没有添加节点的能力。如今，另一种更奇特的技术Asynchronous innerHTML又被开发出来了，不能不赞一下外国人在这方面研究是非常超前的。 代码如下: function asyncInnerHTML(HTML, callback) { var temp = document.createElement(‘div’), frag = document.createDocumentFragment(); temp[removed] = HTML;//要加入的内容先放到这里。 (function(){ if(temp.firstChild)
异步的innerHTML
weixin_30681615的博客
08-20 181
利用innerHTML代替createElement来动态添加网页内容已成为一种普遍的认识。但在商务应用，大数据的datagrid屡见不鲜，就算是innerHTML也捉襟见肘，于是人们又开发了分时加载的技术了（利用setTimeout）。当然，这个分时加载技术只是一个辅助技术，本身没有添加节点的能力。如今，另一种更奇特的技术Asynchronous innerHTML又被开发出来了，不能...
innerHTML的性能问题
weixin_34301132的博客
05-26 300
看到一遍文章When innerHTML isn’t Fast Enough，反应了innerHTML在操作量大了以后的性能下降的问题。 并且给出了一个replaceHTML的函数 Js代码   function replaceHtml(el, html) {        var oldEl = typeof el === "string" ? document.getE...
性能瓶颈定位实录：究竟是IO阻塞还是主线程渲染拖垮了皮肤加载速度？
# 皮肤加载性能优化实战：从卡顿到丝滑的蜕变之路 你有没有遇到过这样的场景？用户点击“切换主题”，结果界面瞬间冻结，进度条纹丝不动——两秒后才猛地弹出新样式。看着用户皱眉刷新页面，作为开发者心里直打鼓...
JavaScript30:30天JavaScript编码挑战
04-07
JavaScript30是一个由知名Web开发者Wes Bos发起的在线学习项目，旨在帮助初学者和有经验的开发者通过30天的实践，掌握...记得，理论学习是基础，动手实践才是王道。参与JavaScript30挑战，你会看到自己的进步和成长。
究竟是道德的沦丧，还是现实的骨感，让携程反爬工程师在代码里写下这句话-『爬虫进阶第二弹』
乌云压顶是吧
04-22 2186
js逆向实战
VUE面试题
永生天地
02-17 1587
一、vue 生命周期 先看一张图片，图片来源于官网：https://cn.vuejs.org/v2/guide/instance.html 以上钩子详细：（只解释了几个主要的） 1.beforeCreate 在页面被加载的时候首先会创建一个Vue的实例，并且初始化该实例，在实例初始化之后，此时被调用的生命周期钩子叫做：beforeCreate,这个时候数据的观测和事件还没有被调用（特就是说此时还读取不到data里面的数据和实力内的方法） 2.created 当vue实例初始化后，实例创建完成后立
解决ajax返回innerHTML中javascript不能运行问题
10-30
解决ajax返回innerHTML中javascript不能运行问题
Angular中innerHTML标签的样式不起作用的原因解析
10-16
主要介绍了Angular中innerHTML标签的样式不起作用详解 ,本文给出了解决方案，非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下
ESP32-CAM无线监控智能网关的设计与实现
niruxi0401的博客
07-06 4031
ESP32-CAM ArduinoIDE开发系列文章目录 第一篇：ESP32-CAM高性价比WIFI图传方案快速入门教程 第二篇：ESP32-CAM第一个无线点灯程序 第三篇：ESP32-CAM智能网关的设计与实现 文章目录ESP32-CAM ArduinoIDE开发系列文章目录前言一、ESP32-CAM无线监控智能网关是什么？二、开发过程1.基于官方代码的修改2.服务器读取get请求3.运行与调试总结 前言     daodanjishui物联网核心原创技术之ESP32 Arduino IDE开
html新页面在页面内显示不出来,改变innerhtml但页面不显示新的innerhtml
weixin_42651748的博客
06-07 1515
在我正在工作的应用程序，页面加载，我设置innerhtml和页面显示正确。我的网页上有一个单选按钮，当被点击时，innerhtml被更改。 innerhtml的新更改不会显示在页面上。我知道，由于设置了跟踪点和调试，我的新innerhtml正在更改，但旧值仍留在我的表中。有什么我需要调用刷新与新的HTML(我不希望页面刷新，但在我的表中的数据)？页面加载调用LoadDashboardTree - ...
innerHTML的使用
凌凌小博客
01-26 590
接学长的项目时，看到innerHTML的这个属性时，一下懵逼了，书上从没有看过这个属性，上3wschool看的解释一头雾水，于是查找资料，终于找到比较通俗易懂的解释了，和大家分享： innerHTML在JS是双向功能：获取对象的内容 或 向对象插入内容；如：这是内容 ，我们可以通过 document.getElementById('aa').innerHTML 来获取id为aa的对象的
原生态Ajax写法异步提交，巧妙利用innerHTML实现不清空原来内容追加请求结果
筱光的博客
11-30 2861
一、Ajax核心代码解析             Ajax的调用方法可以通过onclick、onchange等鼠标和键盘的事件来触发。此处不做叙述。直接看Ajax的核心代码。 function showInfo(){ var xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
什么是innerhtml
最新发布
07-17
HTML 中的 `innerHTML` 属性用于获取或设置指定元素的 HTML 内容，包括其中的所有子元素和文本内容。该属性允许开发者动态地修改网页中的内容，使其能够根据用户的交互行为或其他条件实时更新页面显示[^2]。 ### 获取元素内容 通过 `innerHTML` 属性可以读取一个元素内部包含的所有 HTML 内容，这包括了所有的标签、属性以及纯文本。例如，如果有一个 `<div>` 元素，其内部有若干个段落和其他元素，则使用 `innerHTML` 可以获取到这些内容作为一个字符串。 ### 设置元素内容 除了读取之外，`innerHTML` 还常用于写入新的 HTML 内容到指定的元素中。这意味着可以通过 JavaScript 动态改变页面布局或者添加新的信息块。比如，可以通过简单的赋值操作将一段 HTML 代码插入到页面上的某个容器元素内。 ### 示例代码 以下是一个使用 `innerHTML` 的基本示例： ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>InnerHTML Example</title> <script> function changeContent() { // 获取 id 为 'myDiv' 的元素 var myDiv = document.getElementById('myDiv'); // 使用 innerHTML 修改该元素的内容 myDiv.innerHTML = '<p>这是新内容。</p>'; } </script> </head> <body onload="changeContent()"> <div id="myDiv">原始内容</div> </body> </html> ``` 在上面的例子中，当页面加载完成后，会调用 `changeContent` 函数来更改 `div` 元素的内容。 ### 安全性注意事项 尽管 `innerHTML` 是一个非常强大的工具，但同时也需要注意它的安全性问题。由于它可以执行嵌入的 HTML 和脚本代码，因此如果不正确地处理用户提供的数据并直接将其插入到页面中，可能会导致跨站脚本攻击（XSS）等安全漏洞。为了防止这种情况发生，应当对所有来自不可信来源的数据进行适当的清理和转义[^1]。 ### 与其他属性的区别 与 `innerText` 不同，`innerHTML` 是符合 W3C 标准的属性，并且支持所有主流浏览器。而 `innerText` 主要是在 Internet Explorer 中可用，并且它不会返回隐藏元素的内容或样式化为不可见的内容。此外，`innerText` 会自动处理一些样式相关的特性，如换行符，而 `innerHTML` 则原样返回 HTML 源码中的内容[^3]。 综上所述，`innerHTML` 提供了一种简便的方式来访问和修改文档对象模型（DOM）节点的内容，是 Web 开发过程中不可或缺的一个功能点。然而，在享受便利的同时也必须重视潜在的安全风险。
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值