appendChild使用_谁给解答


<html>
<head>
<script language="javascript">
function test()
{  document.getElementById("name_Search").appendChild(document.getElementById("name_Search_box").childNodes[0]);
}
</script><title></title></head><body>
<div id="name_Search" style="width: 562px; height: 450px;"></div>
<div style="display: none">
<div id="name_Search_box">
<input type="100%"
style="border: 1px solid gray; width: 70px; text-align: center"
onclick="(arguments[0]||window.event).cancelBubble=true;"
onkeyup="filterBy()">
</div>
</div>
<input type="button" onclick="test()" value="Test"
</body></html>上述代码IE和FireFox现象：
    IE中：按钮点击一次可出效果
    FF中：按钮点击两次才出效果
我要统一IE和FF的效果，只点击一次，如何解决
另外：dhtmlxgrid组件，在使用上述方法追加header时，IE有效果，FF中没有效果，如何解决

解决方案 »

  1.   

    FF中，空格认为是一个节点
    先看看document.getElementById("name_Search_box").childNodes[0] 是个什么节点。
      

  2.   

    document.getElementById("name_Search_box").childNodes[0]是
    <input type="100%"
                    style="border: 1px solid gray; width: 70px; text-align: center"
                    onclick="(arguments[0]||window.event).cancelBubble=true;"
                    onkeyup="filterBy()">
      

  3.   

    楼主把test函数写成如下：function test()
    {  
    var d=document.getElementById("name_Search").appendChild(document.getElementById("name_Search_box").childNodes[0]);
    alert(d.nodeType);
    var i=4;
    }就能看出firefox下第一次点击的时候alert出来的nodeType是3，是一个文本节点，其实就是“/n”,第二次点击的时候alert的nodeType是1，此时才得到了Input节点。
      

  4.   

    建议不使用childNodes的方式访问节点，直接将input节点放在div中，点击按钮控制这个input元素的style.display即可。