使用innerHTML要注意的问题

最新推荐文章于 2022-04-17 21:14:15 发布
最新推荐文章于 2022-04-17 21:14:15 发布 · 206 阅读 · 0
文章标签：

#JavaScript #ViewUI

博客介绍了使用innerHTML进行页面部分替换对复杂交互有效，但其中的script不会起作用。为调试方便，可先单独调试innerHTML，调通后将javascript拷贝到主页面，且不用删除其中的script，同时提到javascript报错可能只针对innerHTML里的行数。

使用innerHTML进行页面部分替换对复杂交互很有效。
不过有个地方要注意
.innerHTML里带的script不会起作用
为调试方便起见，可以先对innerHTML进行单独调试，调通后将其中的javascript拷贝到主页面。innerHTML中的script也不用删除。

.javascript报错可能只针对innerHTML里的行数。

8747.html

goldrain 2005-07-29 16:04 发表评论
iteye_344
关注
innerText和innerHTML 一些问题分析
09-05
尽管DOM带来了动态修改文档的能力，但对开发人员来说，这还不够。IE4.0为所有的元素引入了两个特性，以更方便的进行文档操作，这两个特性是innerText和innerHTML。
innerHTML的一个奇怪问题
编程资料大全
07-03 206
背景：使用ajax翻页起初代码是这样的：页面:<div id="comment"><#include "/cn/videoplay/comment/listcomment.ftl"></div> ajax: $('comment).innerHTML = originalRequest.responseText;在firefox下是好的，在IE下页面会挂在那不动...
关于InnerHTML存在的问题
weixin_33819479的博客
08-18 309
innerHTML 属性的使用非常流行，因为他提供了简单的方法完全替代一个 HTML 元素的内容。另外一个方法是使用 DOM Level 2 API（removeChild, createElement, appendChild）。但很显然，使用 innerHTML 修改 DOM tree 是非常容易且有效的方法。然而，你需要知道 innerHTML 有一些自身的问题： 当 HTML 字符串包含...
使用innerHTML时注意处理空格和回车符(asp后台处理)
10-28
然而，当使用 `innerHTML` 包含含有空格和回车符的数据时，可能会遇到一些问题。这是因为浏览器在解析HTML时，会将连续的空格视为一个空格，并且回车符（`\r\n` 或 `\n`）通常被解释为换行，这可能导致段落的意外...
IE中关于使用innerHTML加入HTML代码的问题
09-25
为了解决这个问题，可以使用innerText属性在这些元素中插入纯文本，但请注意这将不包含HTML结构。在实际开发中，为了保证代码的兼容性和可靠性，应尽量使用成熟的JavaScript库或框架，或者编写适当的浏览器检测代码...
ie中关于使用innerhtml加入html代码的问题.doc
12-08
在处理innerHTML这类可能涉及兼容性问题的属性时，开发者应当密切注意官方文档，使用官方推荐的方法，避免使用已废弃或存在兼容性风险的特性。同时，应当合理利用特性检测技术，如Modernizr，来判断当前浏览器对各种...
IE下innerHTML的问题
06-09 432
今天在开发过程中，在进行div的动态设置的时候，在IE下，提示：未完成的。。。。经过一番的搜索，发现IE下的某些HTML元素的innerHTML是只读的。所以在对innerHTML赋值时，会出现错误。解决方法： 在需要赋值的地方，用createElement新创建一个div，再进行赋值，然后将这个新建的div添加到父节点中（appendChild）。
innerHTML的性能问题
weixin_34301132的博客
05-26 299
看到一遍文章When innerHTML isn’t Fast Enough，反应了innerHTML在操作量大了以后的性能下降的问题。 并且给出了一个replaceHTML的函数 Js代码   function replaceHtml(el, html) {        var oldEl = typeof el === "string" ? document.getE...
谨慎使用 innerHTML
weixin_33738555的博客
01-08 310
        遇到一个有意思的问题, HTML中有一个表单, 而表单中的需要填写的元素是通过一个按钮来动态添加的, 这些需要填写的内容id通过Javascript设置为day1, day2, day3等等...都放在dayList这个div中.         原先的方法比较暴力, 但速度非常快, 就是构造一个新的html, 然后直接添加到dayList的innerHTML后面. 但问题是...
innerHTML的问题
alo76502的博客
05-21 167
目的就是给页面的一个table进行多次赋值。 1)第一版的代码 <table border="1" id="divData" > <tr> <th class="bglist-2"> JO </th> <th...
Ext.js古怪的问题（innerHTML）
鹿惊的博客
01-20 827
在使用模板的时候总会报一个warning [W] XTemplate evaluation exception: Cannot set property ‘innerHTML’ of null查了一下API ChildContentClearedWhenSettingInnerHTML : Boolean true if created child elements lose their in
ie中innerHTML出现问题
sdgdwangyan的专栏
10-30 468
innerHTML: The property is read/write for all objects except the following, for which it is read-only: COL, COLGROUP, FRAMESET, HTML, STYLE, TABLE, TBODY, TFOOT, THEAD, TITLE, TR. 也就是说你不能通过inn
innerHTML问题！超级郁闷！
大鸟的专栏
03-14 3100
问题：做网站时发现一个问题（firefox没问题，IE有如下问题）      ...    function  setdiv()  {  var  divi=document.getElementById("xp");  divi.innerHTML  =  ;  alert(divi.innerHTML);  }    ...   alert出来的结果为空，  如果divi.innerHTM
innerHTML属性的内存和性能问题
weixin_30782293的博客
12-28 301
使用innerHTML替换子节点可能会导致浏览器的内存占用问题，尤其是在IE中，问题更加明显。在删除带有时间处理程序或引用了其他js对象子树是，就有可能导致内存占用问题。假设某个元素有一个事件处理程序，在使用前某个属性将该该元素从文档树种删除后，元素与时间处理程序之间的绑定关系在内存中并没有一并删除。如果这种情况频繁出现，页面占用的内存数量就会明显增加。因此在使用innerHTML时，最好先手工删...
浅谈 IE下innerHTML导致的问题
weixin_33826609的博客
06-06 156
原文:浅谈 IE下innerHTML导致的问题先来看个demo吧： &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset=" utf-8"&gt; &lt;meta name="author" content="http://www.softwhy.com/" /&
JavaScript中的innerHTML使用
热门推荐
qq_60115503的博客
04-17 6万+
innerHTML innerHTML属性允许更改html元素的内容,可以设置或返回表格行的开始和结束标签之间的HTML,本篇文章就来给大家介绍关于innerHTML的用法
变相解决调用innerHTML之后，onclick失效的问题
kyrin(云中鹤)
01-28 5135
最近再写一个项目，用到了innerHTML，但是呢，发现调用innerHTML之后，onclick失效了，这也是在意料之中的，因为innerHTML是以文本形式插入的button，所以无法识别onclick事件，所我们只有另找出路了，我们不能直接实现，但是可以间接实现，下面就举个例子： 例子一：该例子是无法实现的onclick的 function insCell(th) v
innerHtml怎么使用
最新发布
06-13
### 使用 `innerHTML` 属性的详细说明 在 JavaScript 中，`innerHTML` 是一个非常常用的属性，用于获取或设置指定元素的内容。以下是关于如何使用 `innerHTML` 属性的详细说明： #### 1. 获取元素内容 可以通过 `document.getElementById()` 方法获取指定的 HTML 元素对象，然后使用 `.innerHTML` 属性读取该元素的内容。 ```javascript function getInnerHTML() { var element = document.getElementById("example"); alert(element.innerHTML); // 显示元素的内容 } ``` 上述代码中，通过 `document.getElementById("example")` 获取了 ID 为 `example` 的元素，并通过 `.innerHTML` 属性读取其内容[^2]。 #### 2. 设置元素内容 除了读取内容外，还可以通过 `innerHTML` 属性修改元素的内容。例如： ```javascript document.getElementById('innerHTMLtxt').innerHTML = "奇葩天地网欢迎你！"; ``` 此代码将 ID 为 `innerHTMLtxt` 的元素内容替换为 `"奇葩天地网欢迎你！"`[^1]。 #### 3. 替换复杂内容 `innerHTML` 不仅可以设置纯文本，还可以设置包含 HTML 标签的内容。例如： ```javascript var mychar = document.getElementById("con"); mychar.innerHTML = "<strong>hello WorldW!</strong>"; ``` 上述代码将 ID 为 `con` 的元素内容替换为带有 `<strong>` 标签的加粗文本[^3]。 #### 4. 注意事项 - **安全性问题**：如果直接将用户输入的内容赋值给 `innerHTML`，可能会导致 XSS（跨站脚本攻击）。因此，在处理用户输入时需要格外小心。 - **性能问题**：频繁修改 `innerHTML` 可能会影响页面性能，尤其是在处理大量 DOM 元素时。 ### 示例代码 以下是一个完整的示例，展示如何使用 `innerHTML` 获取和设置元素内容： ```html <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>innerHTML 示例</title> <script type="text/javascript"> function showOriginalContent() { var element = document.getElementById("content"); alert("原始内容: " + element.innerHTML); } function updateContent() { var element = document.getElementById("content"); element.innerHTML = "新内容"; } </script> </head> <body> <h2 id="content">初始内容</h2> <p><button onclick="showOriginalContent()">显示原始内容</button></p> <p><button onclick="updateContent()">更新内容</button></p> </body> </html> ```
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值