`
edwardpro
  • 浏览: 314480 次
  • 性别: Icon_minigender_1
社区版块
存档分类
最新评论

用innerHTML要小心了

CSS 
阅读更多
昨天在家使用innerHTML时出现点小问题，调试了1个小时才明白：

代码：
js 代码
  1. $('message').innerHTML+="<div id='abc'>";   
  2. $('message').innerHTML+="<div id='abc_child'>";   
  3. $('message').innerHTML+="<p>test</p>";   
  4. $('message').innerHTML+="</div>";   
  5. $('message').innerHTML+="</div>";  


看起来正确的代码，但是奇异的现象出现了，首先是页面上所有的css看起来都丢了。经过调试发现原来上述的代码变了：

js 代码
  1. <div id='abc'></div>   
  2. <div id='abc_child'></div>   
  3. <p>test</p>   
  4. <div></div>   
  5. <div></div>  


神奇地把代码都补全了，造成原来的布局全没有。

当然要解决也很容易咯：

js 代码
  1. var str="";   
  2. str+="<div id='abc'>";   
  3. str+="<div id='abc_child'>";   
  4. str+="<p>test</p>";   
  5. str+="</div>";   
  6. str+="</div>";   
  7. $('message').innerHTML=str;   
分享到：
| 全国人民都在股票太疯狂了
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    js中innerHTML与innerText的用法与区别

    - 使用`innerHTML`时要小心XSS攻击的风险，确保插入的内容已经被安全处理。 - 在处理大量数据或进行频繁更新时，`innerText`可能比`innerHTML`提供更好的性能。 - 对于需要支持所有浏览器的项目，建议使用`...

    InnerHtml和InnerText的区别分析

    在实际开发中，选择使用`InnerHtml`还是`InnerText`取决于具体需求。如果只是想简单地显示或设置元素的纯文本内容，`InnerText`是合适的选择。而如果需要构建或修改HTML结构，包括样式和元素嵌套，`InnerHtml`则更为...

    js innerHTML 改变div内容的方法

    - 使用`innerHTML`时一定要小心，因为你正在改变页面的HTML内容，如果使用不当，可能会导致跨站脚本攻击（XSS）。 - 当你将新的HTML内容赋值给`innerHTML`时，浏览器会解析这段字符串，并将其当作HTML和文本插入到...

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

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

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

    然而，当使用`innerHTML`插入新的HTML代码时，需要格外小心，因为这可能会引起跨站脚本攻击（XSS）的风险，特别是当插入的内容包含未经验证或用户提供的数据时。 在给出的实例代码中，我们可以通过不同的函数来测试...

    innerHTML，outerHTML,innerTEXT三者之间的区别

    - **注意**：修改`outerHTML`可能会导致该元素及其子元素被移除，因此在进行复杂操作时需格外小心。 #### 3. innerText - **定义**：`innerText` 属性用于获取或设置一个元素内部的纯文本内容，不包括任何HTML...

    javascript innerText和innerHtml应用

    3. **潜在的安全风险**：由于`innerHTML`支持HTML标签，因此若不小心处理用户输入的数据，可能会导致XSS攻击。 **示例代码：** ```javascript // 获取元素 var div = document.getElementById("adiv"); // 设置...

    JS中innerHTML和pasteHTML的区别实例分析

    因此，在处理用户输入的数据时，使用`innerHTML`时要特别小心。 **pasteHTML()方法** `pasteHTML()`是一个过时的方法，主要用于IE浏览器，不被现代浏览器支持。它允许在指定的文本范围内插入或替换HTML内容。与`...

    JavaScript 输出显示内容([removed]、alert、innerHTML、console.log)

    需要注意的是，使用innerHTML插入的内容如果包含用户输入的数据，必须小心处理，以避免跨站脚本攻击（XSS）。 console.log()是调试JavaScript代码时常用的工具，它把信息输出到浏览器的控制台。在大多数现代浏览器...

    js动态的添加元素例如表格1

    * 由于 innerHTML 属性会将元素的整个内容重新解析，所以使用这个属性时需要小心，以免影响性能。 * 使用 createElement 和 appendChild 方法可以避免 innerHTML 的性能问题，但需要更多的代码。 * 在添加元素时，...

    js 复制或插入Html的实现方法小结

    在使用innerHTML时，如果内容来自不可信的源，需要特别小心，因为它可能导致跨站脚本攻击（XSS）。确保对插入的内容进行适当的清理和转义处理。 综上所述，选择合适的方法来实现复制或插入HTML，需要根据实际的场景...

    ECMAScript的一个安全要求实现

    对于HTML输出，使用模板引擎或DOM方法（如innerText、textContent）而不是innerHTML，以防止XSS攻击。 此外，理解并正确使用JavaScript的异步编程模型也是关键。Promise和async/await可以避免回调地狱，提高代码...

    javascript eval&#40;func(&#41;)使用示例

    因此，在使用eval()时要非常小心，确保传入的字符串是可控且安全的。 接下来，与eval()功能类似的有execScript()函数，它在旧版的IE浏览器中可以使用，它的作用域是全局作用域，不会像eval()那样在当前作用域中执行...

    JS获取html对象的几种方式介绍

    需要注意的是，innerHTML属性虽然强大，但在某些情况下使用时需要小心，因为通过innerHTML插入的HTML内容没有进行DOM转义，可能会引起跨站脚本攻击（XSS）。 总结以上，JavaScript提供了多种方式来获取页面中的HTML...

    javascript removeChild 导致的内存泄漏

    4. 对于老旧浏览器（如文中提到的IE），在使用特定的DOM操作方法时要加倍小心，因为不同浏览器的实现差异可能会导致内存泄漏问题。 通过以上措施，可以有效减少内存泄漏的风险，提升页面性能，避免因资源占用过多...

    js中[removed]和[removed]ln的区别

    在使用document.write()时需要格外小心，以免不小心清除掉页面上已经存在的内容。在现代Web开发中，建议使用更现代的方法，如innerHTML或者DOM操作，来对页面内容进行操作，以避免潜在的问题和提高页面的性能。

    html转换成js输出

    2. **DOM操作**：在JavaScript中，我们可以使用`document.createElement`、`innerHTML`等方法动态创建和修改HTML元素。将HTML转换为JS的一个常见方法就是解析HTML字符串，然后用这些方法生成DOM节点。 3. **字符串...

    用javascript以xslt显示xml_demo

    在这个"用javascript以xslt显示xml_demo"的示例中，我们将探讨如何利用JavaScript来处理XML数据，并通过XSLT将其转换成易于在网页上展示的形式。 首先，理解XML和XSLT的基础概念是至关重要的。XML是一种结构化数据...

    使用html，css，js实现倒计时案例，并且点击页面出现小心心

    倒计时与小心心 距离结束还有: &lt;span id="timer"&gt;&lt;/span&gt; 点击显示小心心 &lt;script src="script.js"&gt;&lt;/script&gt; ``` 接下来，我们转向CSS（Cascading Style Sheets）来美化我们的页面。在`style.css`文件中...

    chrome-crusader：：rage4：Chrome Crusader：rage4：

    用Google的话来说： 在编写内容脚本时，应该注意两个安全问题。 首先，请注意不要将安全漏洞引入内容脚本所注入的网站。 例如，如果您的内容脚本从另一个网站接收了内容（例如，通过发出XMLHttpRequest），则在将...

Magicbox
Global site tag (gtag.js) - Google Analytics