更新: 这是 JsFiddle 链接:http: //jsfiddle.net/zAVFv/
它似乎在 JsFiddle 中不起作用,但猜测它可以显示整个代码 - html、css 和 Js。
我在使用 Javascript 进行 DOM 编辑时遇到了一个非常奇怪的情况。我的示例代码如下。基本上,swapCells 将接收两个对象,每个对象有 2 个子元素 - 一个是 img 元素,另一个是 textNode。我想看到的是 removeChild 是如何工作的。
我已经标记了所有混乱来自的 2 行。问题#1 位于 sourceTD 删除其子项的行上,问题#2 是从destinationTD 中删除lastChild 时。
让我解释一下下面的代码是如何运行的: a) 当代码中只存在问题 line#1 时,sourceTD 子级被删除,输出显示 source 有 1 个 img 类型的子级;destination 有 2 个子项 - img 和 text ---- 按预期工作 b) 当代码中仅存在问题行 #2 时,destinationTD 子项被删除,再次与上述类似,如预期 c) 现在问题 - 当这两行都存在于代码中,它只删除了 sourceTD lastChild。仅接收警报的 sourceTD 部分的输出。目的地TD警报没有出现,所以我无法评估目的地孩子是否被移除
代码:
function swapCells(sourceTD, destinationTD){
//line below is issue line#1
sourceTD.removeChild(sourceTD.lastChild);
//line below is issue line#2
destinationTD.removeChild(destinationTD.lastChild);
if(sourceTD.hasChildNodes()){
alert("Source has: " + sourceTD.childNodes.length);
alert(sourceTD.childNodes[0].alt);
alert(sourceTD.childNodes[1].nodeName);
}
destinationTD.removeChild(destinationTD.lastChild);
if(destinationTD.hasChildNodes()){
alert("Destination has: " + destinationTD.childNodes.length);
alert(destinationTD.childNodes[0].alt);
alert(destinationTD.childNodes[1].nodeName);
}
}
请让我知道为什么当两个问题行都存在时代码行为异常。另外,是否有类似函数只能删除单个节点,或者只有单个 removeChild 可以工作...??????我很困惑。
谢谢!