innerHTML 和 getElementsByName 在IE下面的bug 的解决

比如有这样一个问题。


代码如下:

<div id="playlist">
</div>

在这div 中，加入一个播放吗列表。这列表用innerHTML 加入。


代码如下:

var plst = null;
plst = player.getPlaylist();
if (plst) {
var txt = '';
for(var i in plst) {
txt += '<a name="fv_item_a_' + i + '"></a><div class="fv_item" id="fv_item_'+ i +'"><div class="playing_bg" name="playing_bg"></div>';
txt += '<div class="playing" name="playing">正在播放...</div>';
txt += '<img src="' + plst[i].image + '" width="80" height="50" class="fv_playlist_img" />';
txt += '<p class="fv_playlist_title"> ' + plst[i].title + ' </p>';
txt += "</div>";
}
var obj= document.getElementById("playlist");
if (obj) {
obj.innerHTML = txt;
}
}

中间的复杂代码不用去管了，现在我要把name 为 playing 的 div 取出来。很容易想到用
getElementsByName
但是，非常奇怪的是，在ie 下面 就是 取不到。getElementById 完全可以用。
下面是一个不错的解决方案：


代码如下:

function GetElementsByName(tag, name) {
var elem = document.getElementsByTagName(tag);
var arr = [];
var index = 0;
var l = elem.length;
for(var i = 0; i < l; i++)
{
var att = elem[i].getAttribute("name");
if(att == name) {
arr[index++] = elem[i];
}
}
return arr;
}

改成这个函数，就可以取了。只是要多一个参数了。
不知道博友们还有没有其他的解决方案，这个解决方案不是很完美。一定要在评论里面留言一下。

赞 (0)

相关推荐

  • Javascript在IE下设置innerHTML时出现未知的运行时错误的解决方法

    复制代码 代码如下: <script> document.getElementById("trone").innerHTML = "<td>haha</td>"; </script> <tr id="trone"> </tr> 在IE中,有时候会出现"未知的运行时错误(unknown runtime error)",而在firefox里不会. 这主要是IE

  • 仅IE6/7/8中innerHTML返回值忽略英文空格的问题

    如下 复制代码 代码如下: <div id="user"> jack</div> <script> alert(document.getElementById('user').innerHTML.length); </script> div[id=user]中的文本"jack"前有两个英文空格,各浏览器下结果如下 IE6/7/8 : 弹出4,即忽略了空格 IE9/Firefox/Safari/Chrome/Opera

  • IE6与IE7中，innerHTML获取param的区别

    IE6与IE7中，innerHTML获取param的区别

    代码: 复制代码 代码如下: <html> <head> <script type="text/javascript"><!-- function setMode(newMode) { var text1=document.getElementById("text1"); var cont; bTextMode = newMode; if (bTextMode) { cont=text1.innerHTML; text1.i

  • 解决IE下select标签innerHTML插入option的BUG（兼容IE,FF,Opera,Chrome,Safari)

    前言: 这是一个老bug了,现在提供一个完美解决方案.由于我一直是用createElement来创建动态的option并添加,所以一直没有遇到这个问题,但是每个人写代码风格不同,有的人就喜欢写字符串形式的标签并用innerHTML插入,这不就有问题了,为了方便不同编码风格的人,我封装了一个方法,用于解决ie的这个bug和兼容5大浏览器,这样大家都可以用一个方法来实现不同的风格,便于维护管理. bug描述: 在ie下面使用innerHTML来插入option选项的话,ie会去掉前面的<option

  • IE6/IE7/IE8/IE9中tbody的innerHTML不能赋值的完美解决方案

    IE6/IE7/IE8/IE9中tbody的innerHTML不能赋值的完美解决方案

    IE6/IE7/IE8/IE9中tbody的innerHTML不能赋值,重现代码如下 复制代码 代码如下: <!DOCTYPE html><html>    <head>        <meta charset="utf-8"/>        <title>IE6-IE9中tbody的innerHTML不能复制bug</title>    </head>    <body style=&quo

  • IE innerHTML,outerHTML所引起的问题

    innerHTML或是outerHTML 比如说: 复制代码 代码如下: var crtDIV = document.getElementById('divIDName'); if (crtDIV) { crtDIV.parentNode.removeChild(crtDIV); crtDIV.outerHTML = ""; } 就有可能发现,整个界面都是无法选中,只有链接才可点击. 解决这方面的异常或是IE错误,只有: 不用outerHTML,或innerHTML. 如果是用到了in

  • IE bug table元素的innerHTML

    首先时飘忽不定的collapse的border,ie6偏偏有一个地方与其他浏览器表现不同,一条丑陋的border不管怎么样都显示出来.无解. 上面的问题可以用诡异方法解决的话,那接下来就完全没有办法了. 由于涉及到了数据的异步传输和实时显示,于是自己写了一个前端模版通过innerHTML动态更新数据.其他浏览器都工作正常,偏偏ie怎么都出不来数据.排查了半天,结果是IE的table元素为只读,不能使用innerHTML!!!! 同样为只读的元素还有COL, COLGROUP, FRAMESET,

  • IE6/7/8/9中Table/Select的innerHTML不能赋值的解决方法

    IE6/7/8/9中Table/Select的innerHTML不能赋值的解决方法

    IE6/7/8/9中Table/Select的innerHTML赋值会报错,如下 IE6/7/8/9中TABLE的innerHTML不能赋值 try{ var table = document.createElement('table'); table.innerHTML = ' Test table innerHTML ' document.body.appendChild(table); }catch(e){ alert(e); } [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

  • js的.innerHTML = ""IE9下显示有错误的解决方法

    问题: 在用js动态创建html页面时: 复制代码 代码如下: var tab = document.createElement("table"); tab.innerHTML += "<td>订货单号</td>"+ "<td>单据日期</td>"+ "<td>商品类型</td>"+ "<td>订单属性</td>"

  • IE 下的只读 innerHTML

    今天做东西遇到一个问题,我试图动态为一个表格添加多行数据,先定义了一个table: 复制代码 代码如下: <table> <thead> </thead> <tbody id="filelist"> </tbody> </table> 然后在JavaScript 中这样操作: 复制代码 代码如下: for(var i in entries){ ... var filetable = document.getElem

  • IE6-IE9不支持table.innerHTML的解决方法分享

    测试代码: 复制代码 代码如下: <table id="test"> </table> <script> var oTable=document.getElementById("test"); oTable.innerHTML="<tr><td>innerHTML</td></tr>"; </script> 上述代码在IE6-9中无效,直接报错: IE

  • JS 动态获取节点代码innerHTML分析 [IE,FF]

    <div id="parentnode"> <span id="childnode">child</span> </div> <script type="text/javascript"> var childNode = document.getElementById("childnode") , parentNode = document.getElementByI

随机推荐