相关标签

Firefox 下 innerHTML 的一个 BUG

今天同事 明城 在项目中碰到一个 BUG,代码具体如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>Firefox下innerHTML的一个BUG</title> <style type="text/css"> a { display: block; border: 1px solid red;} div { display: inline; border: 1px solid red;} </style> </head> <body> <a href="javascript:change();">change<div id="count">20</div>aaa</a> <script type="text/javascript"> function change() { var count = document.getElementById(‘count’); var […]

... 18 条评论 »

innerHTML 的一些问题

innerHTML 属性的使用非常流行,因为他提供了简单的方法完全替代一个 HTML 元素的内容。另外一个方法是使用 DOM Level 2 API(removeChild, createElement, appendChild)。但很显然,使用 innerHTML 修改 DOM tree 是非常容易且有效的方法。然而,你需要知道 innerHTML 有一些自身的问题: 当 HTML 字符串包含一个标记为 defer 的 script 标签(<script defer>…</script>)时,如 innerHTML 属性处理不当,在 Internet Explorer 上会引起脚本注入攻击。 设置 innerHTML 将会破坏现有的已注册了事件处理函数的 HTML 元素,会在某些浏览器上引起内存泄露的潜在危险。 还有几个其他次要的缺点,也值得一提的: 你不能得到刚刚创建的元素的引用,需要你手动添加代码才能取得那些引用(使用 DOM APIs)。 你不能在所有浏览器的所有 HTML 元素上设置 innerHTML 属性(比如,Internet Explorer ... 7 条评论 »

通过 Dom 方法提高 innerHTML 性能

function replaceHtml(el, html) { var oldEl = typeof el === “string” ? document.getElementById(el) : el; /*@cc_on // 原始的 innerHTML 在 IE 中的性能好一点 oldEl.innerHTML = html; return oldEl; @*/ var newEl = oldEl.cloneNode(false); newEl.innerHTML = html; oldEl.parentNode.replaceChild(newEl, oldEl); /* 一旦我们从 DOM 上移除老的元素,则返回新的元素引用。*/ return newEl; }; 此方法大大提高了 innerHTML 在 Firefox 和 Safari 上的性能。replaceHtml() 在 Firefox 2.0.0.6 里 […]

... 11 条评论 »