IE6/7/8中使用innerHTML清空元素，其子元素也被清空 - Snandy - ITeye博客

`

zhouyrt

浏览: 1159190 次
性别:
来自: 北京

最近访客更多访客>>

a612986

tweenkin

zymdev

小白到此一游

博主相关

博客

微博

相册

收藏

留言

关于我

文章分类

社区版块

存档分类

最新评论

zhizhen23： LZ 提供的链接地址失效了
重写的isPlainObject方法
LovingBaby： LovingBaby 写道function fun() {}f ...
读jq之二（两种扩展）
LovingBaby：说的很清楚！jQuery作者为了实现简洁调用的苦心！高超的编程 ...
读jq之一（jq对象的组成）
hard_ly： ...
将伪数组转换成数组
zlxzlxzlxzlxzlx：这不能算是任意进制之间的转换，例如二十六进制、十二进制又该如何 ...
用递归实现十进制数转换N进制

IE6/7/8中使用innerHTML清空元素，其子元素也被清空

博客分类：

BUG

HTML5 HTML 浏览器

阅读更多

Bug 重现：

<!DOCTYPE HTML>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=gbk" />
        <title>IE6/7/8中innerHTML "Bug"</title>
    </head>
    <body>
		<div id="d">
			<div id="d2">d2 text</div>
		</div>
		<script>
			var d2 = document.getElementById('d2');
			var d = document.getElementById('d');
			d.innerHTML = '';
			alert(d2.innerHTML);
		</script>
    </body>
</html>

测试结果:
IE9 beta/Firefox3.6.10/Safari4/Chrome8 dev/Opera10 ：弹出 "d2 text" 文本
IE6/7/8 ：弹出""空字符串

IE6/7/8中使用innerHTML清空父元素div[id=d]，子元素div[id=d2]的innerHTML也被清了，子元素被清包括两个部分：
1，dom结构中清掉了
2，内存中innerHTML置为空字符串(d2.innerHTML)

而 2 不应该被置为空字符串的，这是"Bug"。这里的"Bug"加引号，因为innerHTML并非标准的。各个浏览器都支持了，但实现上没有标准。
html5草案已经接纳innerHTML了：http://www.w3.org/TR/html5/embedded-content-0.html#dom-innerhtml

这个问题是 nick 发现的。

IE678_innerHTML_Bug.rar (372 Bytes)
下载次数: 5

2
顶

1
踩

分享到：

Javascript自动补全类(1) | 写了10年Javascript未必全了解的连续赋值运 ...

2010-10-18 10:09
浏览 4317
评论(2)
分类:Web前端
查看更多

评论

2 楼 zhouyrt 2010-10-18

dcdc723 写道

<div id="d2">d2 text</div>
属于document.getElementById('d')对象的内容。。所以document.getElementById('d').innerHTML = ''之后。document.getElementById('d')节点就置空了，并不是BUG

为什么IE9 beta/Firefox3.6.10/Safari4/Chrome8 dev/Opera10中document.getElementById('d2').inerHTML不为空呢？

1 楼 dcdc723 2010-10-18

<div id="d2">d2 text</div>
属于document.getElementById('d')对象的内容。。所以document.getElementById('d').innerHTML = ''之后。document.getElementById('d')节点就置空了，并不是BUG

发表评论

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

相关推荐

兼容ie6/ie7/ie8/ff 省市县的js: 标题“兼容ie6/ie7/ie8/ff 省市县的js”指的是一个JavaScript插件或库，其主要目的是解决浏览器兼容性问题，特别是针对较老版本的Internet Explorer（IE6、IE7、IE8）以及Firefox（FF）。这个选择器功能允许用户在...

IE6/7/8/9中Table/Select的innerHTML不能赋值的解决方法: 其中一个经典的问题就是尝试使用JavaScript的innerHTML属性来修改表格（Table）或选择列表（Select）的内容，但在IE6、7、8、9版本中，这可能会遇到一些挑战。innerHTML属性通常用于设置或获取元素的HTML内容，但在...

仅IE6/7/8中innerHTML返回值忽略英文空格的问题: 这意味着在IE6-8中，连续的多个空白字符（无论是空格、制表符还是换行符）在innerHTML返回值中都会被简化处理。解决这个问题的一种方法是在获取innerHTML后，再手动处理空格。例如，可以通过正则表达式替换来恢复...

IE6/IE7/IE8/IE9中tbody的innerHTML不能赋值的完美解决方案: 最近发现各大类库都能利用xxx[removed]=HTML片断来生成节点元素，再把它们插入到目标元素的各个位置上。这东西实际上就是insertAdjacentHTML，但是IE可恶的innerHTML把这优势变成劣势。

关于在innerHTML中JS不执行的问题: 例如，如果你有`<script>`标签，可以创建一个新的`script`元素，然后设置其`src`属性，再将其添加到目标元素的子节点中。 ```javascript let script = document.createElement('script'); script.src = 'your_...

ASP.Net中FileUpLoad控件内容清空: ### ASP.NET中FileUpload控件内容清空方法详解在ASP.NET Web开发中，`FileUpload` 控件常被用于实现文件上传功能。但在某些情况下，我们可能需要清空该控件的内容，例如用户取消了文件选择或者上传操作。本文将...

清空元素html("") innerHTML="" 与 empty()的区别和应用(推荐): innerHTML=""方法是JavaScript提供的一种清空元素的方法，该方法可以将元素中的所有子元素和内容删除，但是该方法也存在内存泄露的问题。这种方法的原理是使用innerHTML property来清空元素，但是该方法不会通知...

IE6/7/8中Option元素未设value时Select将获取空字符串: 然而，在不同的浏览器中，特别是较旧版本如IE6、IE7和IE8，处理`<option>`元素时存在一些不一致的行为。本文将深入探讨这些差异，尤其是当`<option>`的`value`属性未设置时，不同浏览器如何处理`<option>`的`value`...

innerHTML和innerText的区别: 例如，下面的代码可以获取 test 元素中的所有内容，然后使用正则表达式来提取其中的文本内容： var content = test.innerHTML; var textContent = content.replace(/<.+?>/gim,''); alert(textContent); innerText...

IE6-IE9中tbody的innerHTML不能赋值的解决方法: IE6-IE9中tbody的innerHTML不能赋值，重现代码如下 Js代码 <!DOCTYPE html> <html> <head> <meta charset=utf-8/> <title>IE6-IE9中tbody的innerHTML不能复制bug</title> </...

应用before/after伪类时如何CSS命名以及针对ie6/ie7浏览器兼容: 然而，`before` 和 `after` 伪类在Internet Explorer 6 (IE6) 和 7 (IE7) 中并不被支持，这就需要一些额外的技巧来实现兼容性。首先，为了确保在现代浏览器中的正常工作，我们可以使用带有冒号的伪类语法，如 `....

IE6与IE7中，innerHTML获取param的区别: 本文将详细探讨一个特定的问题，即在IE6和IE7中使用`innerHTML`属性获取`<object>`标签内的`<param>`子标签时的区别。 `innerHTML`是JavaScript中用于设置或获取元素内HTML内容的属性。当你访问一个元素的`...

innerHtml（转）: `innerHTML`允许我们获取或设置HTML元素内部的HTML代码，包括其子元素。这个属性在动态网页开发中非常常用，因为它提供了一种便捷的方式来操作DOM元素，比如插入、删除或更新HTML内容。这篇博客文章（链接已提供但...

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

IE 下的只读 innerHTML: 值得注意的是，如果`<table>`元素没有`<tbody>`子元素，直接在IE6中对`table`使用`appendChild`方法是无效的，因为IE6不支持对`table`元素直接进行`appendChild`操作（IE8及以上版本已修复此问题）。在这种情况下，...

IE bug table元素的innerHTML: 首先时飘忽不定的collapse的border，ie6偏偏...排查了半天，结果是IE的table元素为只读，不能使用innerHTML！！！！同样为只读的元素还有COL, COLGROUP, FRAMESET, HTML, STYLE, TABLE, TBODY, TFOOT, THEAD, TITLE, T

Global site tag (gtag.js) - Google Analytics