火狐与IE下兼容问题

<html>
<head>
<title>测试innerHTML</title>
<script language="javascript">
var i=1;
function add()
{
i++;
input='<span id="txtshow'+i+'"><table align="center" id="tab'+i+'"><td>姓名'+i+'</td><td><input type="text" name="txt'+i+'" id="txt'+i+'"></td><td><a href="javascript:void(0);" onclick=add()>添加</a><a href="javascript:void(0);" onclick=del("txtshow'+i+'")>|删除</a></td></table></span>'  
if(document.all)
{
document.getElementById("addname").insertAdjacentHTML("beforeEnd",input);
}
else
{
var e=document.getElementById("addname").ownerDocument.createRange();
e.setStartBefore(document.getElementById("addname"));
e=e.createContextualFragment(input);
document.getElementById("addname").appendChild(e);
}
}
function del(m)
{  
document.getElementById(m).innerHTML="";
}
</script>
</head>
<body>
<form name="form1" action="" method="post">
<table>
<tr>
<td id="addname"><span id="txtshow1">
<table align="center" id="tab1">
<tr>
<td>姓名</td><td><input type="text" name="txt1" id="txt1"></td><td><a href="javascript:void(0);" onClick="add()">添加</a></td>
</tr>
</table></span>
</td>
</tr>
</table>
</form>
</body>
</html>  
在Firefox里点击添加正常， 点击删除无反应。帮帮忙看看……

解决方案 »

  1.   

    可能是firefox的bug，往td里插入就会将span分离，往div里插入就正确。<html>
    <head>
    <title>测试innerHTML</title>
    <script>
    var i=1;
    function add() {
    i++;
    input='<span id="txtshow'+i+'"><table align="center" id="tab'+i+'"><tr><td>姓名'+i+'</td><td><input type="text" name="txt'+i+'" id="txt'+i+'"></td><td><a href="javascript:void(0);" onclick=add()>添加</a><a href="javascript:void(0);" onclick=del("txtshow'+i+'")>|删除</a></td></tr></table></span>';
    if(document.all) {
    document.getElementById("addname").insertAdjacentHTML("beforeEnd",input);
    } else {
    var e=document.getElementById("addname").ownerDocument.createRange();
    e.setStartBefore(document.getElementById("addname"));
    e=e.createContextualFragment(input);
    document.getElementById("addname").appendChild(e);
    }
    }
    function del(m) {  
    document.getElementById(m).innerHTML="";
    }
    </script>
    </head>
    <body>
    <form name="form1" action="" method="post">
    <table>
    <tr>
    <td><div id="addname"><span id="txtshow1">
    <table align="center" id="tab1">
    <tr>
    <td>姓名</td><td><input type="text" name="txt1" id="txt1"></td><td><a href="javascript:void(0);" onClick="add()">添加</a></td>
    </tr>
    </table></span></div>
    </td>
    </tr>
    </table>
    </form>
    </body>
    </html> 
      

  2.   

    <body>
    <table><tr><td id="td"><div id="div"></div></td></tr></table>
    <script>
    var html = '<span style="color:red;">span<table><tr><td>table</td></tr></table></span>';
    var e=document.getElementById("td").ownerDocument.createRange();
    e.setStartBefore(document.getElementById("td"));
    e=e.createContextualFragment(html);
    document.getElementById("td").appendChild(e);var e=document.getElementById("div").ownerDocument.createRange();
    e.setStartBefore(document.getElementById("div"));
    e=e.createContextualFragment(html);
    document.getElementById("div").appendChild(e);
    </script>
    </body>得到的结果：
    <table><tbody><tr>
    <td id="td">
    <div id="div">
    <span style="color: red;">span
    <table><tbody><tr><td>table</td></tr></tbody></table>
    </span>
    </div>

    <span style="color: red;">span</span>
    <table><tbody><tr><td>table</td></tr></tbody></table>
    </td>
    </tr></tbody></table>