innerHTML生成代码问题

最新推荐文章于 2021-02-07 17:35:08 发布
最新推荐文章于 2021-02-07 17:35:08 发布
阅读量617 收藏
点赞数
CC 4.0 BY-SA版权
分类专栏： javascript 文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/zb219/article/details/2579504
本文探讨了一段HTML代码中内联JavaScript导致的0行,未结束字符串常量错误问题。通过具体实例分析发现，错误源于innerHTML属性中特殊字符 的不当处理。文章指出，在innerHTML中直接使用某些特殊字符可能会引发意料之外的问题。

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

代码如下 <body> <div id="dfdf"></div> <input type=text id="ccc" value="" /> <script> document.getElementById('dfdf').innerHTML="<font onmouseover=alert('/nihaonihao')>dfdf

</font>" </script> </body>

此页会报“0行,未结束字符串常量错误”,经分析,原因在于alert('/nihaonihao')>中的“/n" innerHTML把它解析成为"&#10",而alert('&#10')会报错,&#代表特殊字符,如"♀"，alert("&#12")都不会错,但“&#10”就会.如果直接document.getElementById('dfdf').innerHTML='"/n",也不会有错,非要在innerHTML里面写javascript才会有错,下次使用innerHTML要注意了

innerText和innerHTML 一些问题分析
12-11
其中innerText特性用来修改起始标签和结束标签之间的文本的。例如，假设有个空的<div>元素，希望将其变成<div>New text for the div.</div>。用DOM实现时，要这么做： oDiv.appendChild(document.createTextNode(“New text for the div.”)); 这段代码并不难读，但是很冗长。如果使用innerText,只要这么做： oDiv.innerText = “New text for the div.”; 使用innerText,代码更加简洁，并且更容易理解。另外，innerText会自动将小于号、大于号
关于innerHTML后丢失动态绑定的EVENT问题解决方法
09-05
这是因为`innerHTML`在设置新内容时，会重新解析整个HTML字符串，生成新的DOM子树，从而导致所有原生的DOM事件监听器被清除。 例如，考虑以下代码片段： ```html 点击 document.getElementById('d1').onclick...
innerHTML的一个奇怪问题
编程资料大全
07-03 194
背景：使用ajax翻页起初代码是这样的：页面:&lt;div id="comment"&gt;&lt;#include "/cn/videoplay/comment/listcomment.ftl"&gt;&lt;/div&gt; ajax: $('comment).innerHTML = originalRequest.responseText;在firefox下是好的，在IE下页面会挂在那不动...
关于InnerHTML存在的问题
weixin_33819479的博客
08-18 301
innerHTML 属性的使用非常流行，因为他提供了简单的方法完全替代一个 HTML 元素的内容。另外一个方法是使用 DOM Level 2 API（removeChild, createElement, appendChild）。但很显然，使用 innerHTML 修改 DOM tree 是非常容易且有效的方法。然而，你需要知道 innerHTML 有一些自身的问题： 当 HTML 字符串包含...
IE下innerHTML的问题
06-09 424
今天在开发过程中，在进行div的动态设置的时候，在IE下，提示：未完成的。。。。经过一番的搜索，发现IE下的某些HTML元素的innerHTML是只读的。所以在对innerHTML赋值时，会出现错误。解决方法： 在需要赋值的地方，用createElement新创建一个div，再进行赋值，然后将这个新建的div添加到父节点中（appendChild）。
使用innerHTML要注意的问题
goldrain
07-29 226
使用innerHTML进行页面部分替换对复杂交互很有效。不过有个地方要注意.innerHTML里带的script不会起作用为调试方便起见，可以先对innerHTML进行单独调试，调通后将其中的javascript拷贝到主页面。innerHTML中的script也不用删除。.javascript报错可能只针对innerHTML里的行数。goldrain 2005-07-29 16:04 发表评论...
调用innerHTML之后onclick失效问题的解决方法
09-04
这个问题通常发生在动态生成或修改HTML内容时，例如在上述例子中，当用户点击按钮改变按钮状态（上线/下线）时，`onclick`事件应该被触发，但因为使用了`innerHTML`，导致事件失效。 为了解决这个问题，我们需要...
优化innerHTML操作(提高代码执行效率)
09-05
innerHTML是JavaScript中用于设置或获取HTML元素内所有子节点（包括文本节点）的HTML源代码的一个属性。这个功能在处理动态网页内容时非常方便，但同时也可能成为性能瓶颈，尤其是在频繁操作大量数据时。以下是对...
关于在innerHTML中JS不执行的问题
03-28
这就是为什么在`innerHTML`中插入的JS代码不执行的原因。 为了解决这个问题，我们可以采用以下几种方法： 1. **使用`document.createElement`和`element.appendChild`**：这种方法创建和操作DOM元素是安全的，因为...
javascript 动态生成css代码的两种方法
10-20
以下详细介绍两种常见的JavaScript动态生成CSS代码的方法及其兼容性问题的解决方法。 ### 方法一：直接修改已有style元素的内容 该方法涉及对页面上已存在的`<style>`元素进行操作。具体步骤包括：先通过`document...
innerHTML的性能问题
weixin_34301132的博客
05-26 287
看到一遍文章When innerHTML isn’t Fast Enough，反应了innerHTML在操作量大了以后的性能下降的问题。 并且给出了一个replaceHTML的函数 Js代码   function replaceHtml(el, html) {        var oldEl = typeof el === "string" ? document.getE...
innerHTML的问题
alo76502的博客
05-21 155
目的就是给页面的一个table进行多次赋值。 1)第一版的代码 <table border="1" id="divData" > <tr> <th class="bglist-2"> JO </th> <th...
Ext.js古怪的问题（innerHTML）
鹿惊的博客
01-20 802
在使用模板的时候总会报一个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 463
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 3073
问题：做网站时发现一个问题（firefox没问题，IE有如下问题）      ...    function  setdiv()  {  var  divi=document.getElementById("xp");  divi.innerHTML  =  ;  alert(divi.innerHTML);  }    ...   alert出来的结果为空，  如果divi.innerHTM
innerHTML属性的内存和性能问题
weixin_30782293的博客
12-28 288
使用innerHTML替换子节点可能会导致浏览器的内存占用问题，尤其是在IE中，问题更加明显。在删除带有时间处理程序或引用了其他js对象子树是，就有可能导致内存占用问题。假设某个元素有一个事件处理程序，在使用前某个属性将该该元素从文档树种删除后，元素与时间处理程序之间的绑定关系在内存中并没有一并删除。如果这种情况频繁出现，页面占用的内存数量就会明显增加。因此在使用innerHTML时，最好先手工删...
react不解析html元素，并将html元素原样输出到页面？（已解决）
生命不息，奋斗不止
02-07 2604
前端使用react，如果是直接return html元素，react是可以正常解析的，但是如果一个变量中返回了一段html代码，此时，react并不会解析，变量中的html代码，而是将其原样输出到页面 错误代码示范 const html = "<span>111111 </span>"； return (<div>{html}</div>) //这样写页面会直接显示<span>111111 </span> 解决方法 l.
html中 \r\n不识别解决方案
热门推荐
橙-极纪元-JJYCheng
06-22 1万+
html 文本换行 \n 不换行 空格无效 文本中直接用 \n ，无法换行，因为 html 不识别 \n，如果只是单纯的用 replace 把 \n 换成 <br/>，只能变成普通的字符串，也还是无法换行。 解决方法有这么几种： 1. 用 innerHTML = " ... " 或者 v-html 来把 <br/> 识别为 html node 2. 在标签上套一个 <pre></pre> 3. 设置 css 【推荐】 // 合并空白符序列...
JS自动生成标签代码工具介绍
根据提供的文件信息，我们可以看出这款工具的核心功能是通过JavaScript（简称JS）来实现动态创建HTML标签，并通过用户输入的关键词来生成这些标签的代码。接下来，我们将详细探讨与这一功能相关的知识点，内容将覆盖...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值