`
HWL_SZ
  • 浏览: 54281 次
  • 性别: Icon_minigender_1
  • 来自: 深圳
社区版块
存档分类
最新评论

innerHTML的一些总结

阅读更多

项目偶尔会遇到使用innerHTML对元素内容进行赋值导致注册的事件失效或元素对象无法找到等问题,在这里总结innerHTML自身的一些问题

1、当innerHTML中包含javascript代码,需在defer关键字,如<script defer>…</script>,否则无法执行。这种方法有一定的危险性,处理不当,容易引起脚本注入攻击。

2、设置innerHTML将会破坏现有的已注册了事件处理函数的HTML元素,会在某些浏览器上引起内存泄露的潜在危险

3、innerHTML会破坏dom的结构,无法得到刚刚创建的元素的引用,需要你手动添加代码才能取得那些引用

4、你不能在所有浏览器的所有HTML元素上设置innerHTML属性(比如,IE不允许你在表格的行元素上设置innerHTML 属性)

0
2
分享到:
评论

相关推荐

    js中innerHTML与innerText的用法与区别

    #### 区别总结 - **HTML标签处理:** - `innerHTML`保留HTML标签,可以用来插入完整的HTML结构。 - `innerText`忽略HTML标签,只关注纯文本内容。 - **浏览器兼容性:** - `innerHTML`是W3C标准的一部分,在...

    通过改变innerHTML的内容,动态增加选择项

    总结来说,通过改变`innerHTML`的内容,我们可以动态地向页面元素中添加HTML,包括在`&lt;select&gt;`元素中添加选择项。这种方法简单易用,但也需要注意性能优化。在实际开发中,应根据具体需求和数据量选择合适的方法。...

    innerHTML-outerHTML-innerTEXT.txt

    ### 区别总结 - **innerHTML**:返回并允许设置元素内的 HTML 内容。 - **innerText**:仅返回并允许设置元素内的纯文本内容。 - **outerHTML**:返回并允许设置包含当前元素在内的完整 HTML 内容。 ### 注意事项 ...

    innerText和innerHTML 一些问题分析

    总结来说,innerText 和 innerHTML 是处理HTML元素内容的两个关键工具。innerText 适合于操作纯文本,保持代码简洁易读,而innerHTML 则用于插入或修改复杂的HTML结构。正确选择和使用这两个属性,能有效提升Web开发...

    innerHTML在IE中报错解决方案

    总结起来,innerHTML在IE浏览器的低版本中存在兼容性问题,特别是对于table和tr元素。当需要在这些元素中动态插入内容时,应避免使用innerHTML,而应转而使用DOM操作方法,如insertRow()和insertCell()等。这不仅能...

    Javascript中innerHTML用法实例分析

    总结来说,innerHTML 属性是 JavaScript 操作 HTML 文档中元素内容的核心工具之一。通过它可以方便地读取和修改页面上元素的 HTML 内容。不过在使用时要注意防范潜在的安全问题,避免执行未授权的代码。通过理解并...

    innerHTML与jquery里的html()区别介绍

    innerHTML 和 jQuery 中的 `.html()` 方法都是用于操作 HTML 元素的内容,但它们在使用时有一些关键的区别,尤其是在处理特定浏览器兼容性问题时。 首先,`innerHTML` 是一个原生的 JavaScript 属性,用于获取或...

    Javascript createElement和innerHTML增加页面元素的性能对比

    总结来说,选择`createElement`还是`innerHTML`应根据具体场景来决定。如果关注性能,需要考虑元素的数量、是否涉及复杂的字符串操作以及更新频率。同时,现代浏览器的性能优化也使得两者之间的差距不像过去那么明显...

    关于innerHTML后丢失动态绑定的EVENT问题解决方法

    总结起来,当面临`innerHTML`导致动态绑定事件丢失的问题时,可以选择事件委托、使用`outerHTML`、手动创建DOM节点或借助库和框架来解决。每种方法都有其优缺点,应根据实际项目需求和性能考虑来选择合适的方法。

    Angular中innerHTML标签的样式不起作用的原因解析

    总结来说,要解决 Angular 中 `innerHTML` 样式不起作用的问题,需要理解框架的安全策略,并合理使用 `DomSanitizer` 服务或自定义管道来绕过这些策略。同时,开发者应该密切注意安全性问题,防止潜在的跨站脚本攻击...

    用innerhtml提高页面打开速度的方法

    总结来说,innerHTML是提高页面打开速度的一种有效手段。通过将大块的HTML内容移出主线程,利用JavaScript在页面加载后进行动态插入,我们可以显著改善用户的浏览体验。但这并不意味着innerHTML总是最佳解决方案,...

    javascript中innerHTML 获取或替换html内容的实现代码

    总结来说,innerHTML是JavaScript中一个强大的工具,它可以方便地获取或替换HTML元素的全部内容,但使用时要注意性能和安全问题。在实际开发中,根据具体需求选择合适的方法进行DOM操作,既能提高效率,又能保证代码...

    javascript中innerText和innerHTML属性用法实例分析

    总结来说,`innerText`和`innerHTML`是JavaScript中非常实用的属性,通过理解它们的作用和特性,开发者能够更加灵活地处理HTML文档内容。在使用时,选择合适的属性根据实际需要进行操作,是编写有效且安全JavaScript...

    innerHTML动态添加html代码和脚本兼容多个浏览器

    总结起来,innerHTML动态添加HTML代码和脚本时,我们需要考虑浏览器兼容性问题。通过编写像`set_innerHTML`这样的函数,可以有效地处理不同浏览器对innerHTML的解析差异,并确保JavaScript脚本在所有支持的浏览器中...

    innerHTML,outerHTML,innerText,outerText的用法及区别解析

    总结来说,`innerHTML`和`outerHTML`关注的是元素的HTML结构,而`innerText`和`outerText`则主要处理文本内容。`innerHTML`和`outerHTML`在设置时可以插入HTML代码,而`innerText`和`outerText`则始终视为纯文本。在...

    IE中关于使用innerHTML加入HTML代码的问题

    总结起来,innerHTML属性在JavaScript中用于动态更新HTML内容,但在IE中对某些特定元素(如`&lt;tbody&gt;`)是只读的。为了解决这个问题,可以使用innerText属性在这些元素中插入纯文本,但请注意这将不包含HTML结构。在...

    innerHTML 和 getElementsByName 在IE下面的bug 的解决

    总结来说,`innerHTML`和`getElementsByName`在IE中可能出现兼容性问题。为了解决这些问题,可以使用自定义函数、更新的选择器API或者调整DOM操作策略。在编写跨浏览器的JavaScript代码时,理解这些差异并采用适当的...

    让插入到 innerHTML 中的 script 跑起来的代码第1/2页

    总结起来,要使插入到`innerHTML`的`&lt;script&gt;`脚本在所有主流浏览器中都能正确执行,我们需要: 1. 检查并处理`defer`属性,确保脚本在适当的时候执行。 2. 分别处理外部脚本和内部脚本,确保它们被正确地创建和...

Global site tag (gtag.js) - Google Analytics