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

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

#html #ie

本文探讨了在IE6浏览器中使用addoption方法动态添加select元素子项的问题。实验发现，添加子项并立即设置为选中状态会导致错误。原因是页面渲染未同步完成。使用innerHTML则可以避免此问题。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

在IE6下做了个试验,用addoption的方法动态的添加select的子项,添加完后,迅速将某一子项设为选择状态,发现会报错,分析是因为,代码虽然添加了子项,但页网实际上并没有同步渲染,所以就锁定不到子项.用innerHTML就可以
ajax异步刷新邂逅了你—innerHTML
等待着雨水,茁壮成长--李建敏
12-19 1814
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)
html事件是异步的吗,javascript – innerHTML是异步的吗？
weixin_42538752的博客
06-10 321
设置innerHTML是同步的,您可以对DOM进行大多数更改.但是,呈现网页是一个不同的故事.(请记住,DOM代表“文档对象模型”.它只是一个“模型”,一个数据表示.用户在屏幕上看到的是该模型应该如何看的图片.因此,更改模型不会立即改变图片 – 需要一些时间来更新.)运行JavaScript并呈现网页实际上是分开进行的.简单地说,首先运行页面上的所有JavaScript(从事件循环 – 查看thi...
异步的innerHTML
weixin_30681615的博客
08-20 170
利用innerHTML代替createElement来动态添加网页内容已成为一种普遍的认识。但在商务应用，大数据的datagrid屡见不鲜，就算是innerHTML也捉襟见肘，于是人们又开发了分时加载的技术了（利用setTimeout）。当然，这个分时加载技术只是一个辅助技术，本身没有添加节点的能力。如今，另一种更奇特的技术Asynchronous innerHTML又被开发出来了，不能...
innerHTML的性能问题
weixin_34301132的博客
05-26 284
看到一遍文章When innerHTML isn’t Fast Enough，反应了innerHTML在操作量大了以后的性能下降的问题。 并且给出了一个replaceHTML的函数 Js代码   function replaceHtml(el, html) {        var oldEl = typeof el === "string" ? document.getE...
innerHTML动态添加html代码和脚本兼容多个浏览器
12-12
症状：给某个元素的 innerHTML 设置值时，如果提供的 HTML 代码中包含js脚本，很多时候这些脚本无效，或者在某种浏览器上有效，但在其它浏览器上无效。 原因：不同浏览器对插入 innerHTML 中的脚本有不同的处理方法...
关于innerHTML后丢失动态绑定的EVENT问题解决方法
01-19
用innerHTML取出一段内容后再innerHTML回去,那么原来动态绑定的事件就会丢失,如: html: 代码如下: <body>’d1′>点击</div></body> script: 代码如下: document.getElementById(‘d1’).onclick=...
对于比较大的页面innerHTML或appendChild要避免
ang639
04-28 1795
我们经常会通过JS来对页面布局进行调整。然而，对于比较大的部分最好避免调整，比如innerHTML或appendChild进行位置调整。因为在调整的过程中，浏览器会对这些变动的部位进行重新刷新，其HTML比较大时浏览器解析就很慢，然后会导致页面的明显抖动。
html新页面在页面内显示不出来,改变innerhtml但页面不显示新的innerhtml
weixin_42651748的博客
06-07 1488
在我正在工作的应用程序，页面加载，我设置innerhtml和页面显示正确。我的网页上有一个单选按钮，当被点击时，innerhtml被更改。 innerhtml的新更改不会显示在页面上。我知道，由于设置了跟踪点和调试，我的新innerhtml正在更改，但旧值仍留在我的表中。有什么我需要调用刷新与新的HTML(我不希望页面刷新，但在我的表中的数据)？页面加载调用LoadDashboardTree - ...
解决ajax返回innerHTML中javascript不能运行问题
10-30
解决ajax返回innerHTML中javascript不能运行问题
Angular中innerHTML标签的样式不起作用的原因解析
10-16
主要介绍了Angular中innerHTML标签的样式不起作用详解 ,本文给出了解决方案，非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下
innerHTML的使用
凌凌小博客
01-26 568
接学长的项目时，看到innerHTML的这个属性时，一下懵逼了，书上从没有看过这个属性，上3wschool看的解释一头雾水，于是查找资料，终于找到比较通俗易懂的解释了，和大家分享： innerHTML在JS是双向功能：获取对象的内容 或 向对象插入内容；如：这是内容 ，我们可以通过 document.getElementById('aa').innerHTML 来获取id为aa的对象的
JavaScript 中在光标处插入添加文本标签节点 详细方法
weixin_34150830的博客
09-02 190
正确的方法是正确运用Selection对象和Range对象，实现在光标当前位置插入文本或结点。但是这两个对象在IE和标准的DOM方式的运用方法是不同的。 思路：首先获得用户的选区（光标当前位置可理解成起始和终止位置一样的选区）。然后，从Selection对象转成Range对象。目的是利用Range对象的方法插内容进去。最后，插入动作结束后将光标移到插入内容的后面。 Html...
innerHTML、outerHTML、innerText、outerText的区别及兼容性问题
weixin_34336292的博客
09-07 190
今天看了很多文章关于innerHTML、outerHTML、innerText、outerText的区别，都是很模糊的一个介绍，所以自己总结下这些区别以及一些重点内容。很多文章在描述这些区别的时候，都是只针对一点进行描述，所以很难完全理解这些的字面含义以及区别点。   一、区别描述如下：（书上形式的说法）   innerHTML设置或获取位于对象起始和结束标签内的 HTML outerHTML设...
innerText和innerHTML的区别
天才也是人
12-11 624
innerText和innerHTML的区别先看下面的代码testfunction show1(){document.all.test.innerText="test";}function show2(){document.all.test.innerHTML="test";}innerTexttestinnerTexttestinnerHTML对于innerText，即把"test"当成整体内容
什么是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 开发过程中不可或缺的一个功能点。然而，在享受便利的同时也必须重视潜在的安全风险。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值