一个关于DOM的问题，请各位大虾帮忙！

下为一个页面的代码，它主要测试能否把文档中的
<label id="outerLab"><label id="innerLab">abc<input type="text" id="innerTxt"/></label></label>变为
<label id="outerLab">abc<input type="text" id="innerTxt"/></label>即把<label id="innerLab">及其对应的</label>从文档中删掉。
代码在IE8下运行能达到目标效果，但在firefox却不行，不知是什么原因！<html>

<head>
<script>
function delLab() {
var labs = document.getElementsByTagName("label");
var outerLab = document.getElementById("outerLab");
alert(outerLab.innerHTML); for (var i = 0; i < labs.length; i++) {
var lab = labs[i];
if (lab.id == "innerLab") {
var labChildNodes = lab.childNodes;
for (var j = 0; j < labChildNodes.length;) {
lab.parentNode.insertBefore(labChildNodes[j], lab);
}
lab.parentNode.removeChild(lab);
}
}
var outerLab = document.getElementById("outerLab");
alert(outerLab.innerHTML);
}
</script>
</head>

<body>
<label id="outerLab"><label id="innerLab">abc<input type="text" id="innerTxt"/></label></label>

<br><input type="button" value="删除lab" onclick="delLab();" />
</body>

</html>

解决方案 »

  1.   

    原因是因为FireFox里运行你的代码生成的dom结构为：<label id="outerLab"> </label>
    <label id="innerLab">
    abc
    <input id="innerTxt" type="text"/>
    </label>
    <br/>
    <input type="button" onclick="delLab();" value="删除lab"/>
    </body>
      

  2.   

    可能是Firefox不允许label里面嵌套label，lz用div就好了：
    <html> <head> 
    <script> 
    function delLab() { 
    var labs = document.getElementsByTagName("div"); 
    var outerLab = document.getElementById("outerLab"); 
    alert(outerLab.innerHTML); for (var i = 0; i < labs.length; i++) { 
    var lab = labs[i]; 
    if (lab.id == "innerLab") { 
    var labChildNodes = lab.childNodes; 
    for (var j = 0; j < labChildNodes.length;) { 
    lab.parentNode.insertBefore(labChildNodes[j], lab); 
    } 
    lab.parentNode.removeChild(lab); 
    } 
    } 
    var outerLab = document.getElementById("outerLab"); 
    alert(outerLab.innerHTML); 
    } 
    </script> 
    </head> <body> 
    <div id="outerLab"> <div id="innerLab">abc <input type="text" id="innerTxt"/> </div> </div> <br> <input type="button" value="删除lab" onclick="delLab();" /> 
    </body> </html>
      

  3.   


    <html> 
    <head> 
    <script> 
    function delLab() { 
    var labs = document.getElementsByTagName("label"); 
    var outerLab = document.getElementById("outerLab"); 
    // alert(outerLab.innerHTML);
    for (var i = 0; i < labs.length; i++) { 
    var lab = labs[i];
    if (lab.id == "innerLab"){
    var labChildNodes = lab.childNodes; 
    for (var j = 0; j < labChildNodes.length;) { 
    outerLab.appendChild(labChildNodes[j]);
    }
    lab.parentNode.removeChild(lab);
    }
    } 
    var outerLab = document.getElementById("outerLab"); 
    alert(outerLab.innerHTML); 
    } 
    </script> 
    </head> <body> 
    <label id="outerLab">
    <label id="innerLab">abc<input type="text" id="innerTxt"/></label>
    </label> 
    <br><input type="button" value="删除lab" onclick="delLab();" /> 
    </body> 
    </html>
      

  4.   

    如果<label id="innerLab">没有其他兄弟节点可以这样：
    document.getElementById("outerLab").innerHTML = document.getElementById("outerLab").innerHTML.replace(/<label id="innerLab">(.*)<\/label>/ig,'\$1')