求一个JS的replaceChild的用法问题

代码如下：<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script language="javascript" type="text/javascript">
        
        function replaceControl() {
            var divObj = document.getElementById("divContent");
            var ckNew = document.createElement("checkbox");
            ckNew.setAttribute("value", "新增的复选框");
            var oldObj = document.getElementById("txtTwo");
            var returnObj = divObj.replaceChild(ckNew, oldObj);
            var returnValue = returnObj.value;
        }        function removeControl() {
            var divObj = document.getElementById("divContent");
            var oldObj = document.getElementById("txtTwo");
            var returnObj = divObj.removeChild(oldObj);
            var returnValue = returnObj.value;
        }
    </script>
</head>
<body>
    <form id="form1" runat="server">
        <div id="divContent">
        <input type="text" value="123"  id="txtOne" />
        <input type="text" value="456"  id="txtTwo" />
        <input type="button" value="replaceControl" onclick="replaceControl();" />
        <input type="button" value="removeControl()" onclick="removeControl();"  />
    </div>
    </form>
</body>
</html>
在replaceControl方法中，我使用replaceChild 进行div容器内的控件替换，但页面没有效果，用debugbar进行跟踪发现代码已经改变了，请问这是什么情况？

解决方案 »

  1.   

    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
        <script language="javascript" type="text/javascript">
            
            function replaceControl() {
                var divObj = document.getElementById("divContent");
                var ckNew = document.createElement("input");
    ckNew.type = 'checkbox';
                ckNew.setAttribute("value", "新增的复选框");
                var oldObj = document.getElementById("txtTwo");
                var returnObj = divObj.replaceChild(ckNew, oldObj);
                var returnValue = returnObj.value;
            }        function removeControl() {
                var divObj = document.getElementById("divContent");
                var oldObj = document.getElementById("txtTwo");
                var returnObj = divObj.removeChild(oldObj);
                var returnValue = returnObj.value;
            }
        </script>
    </head>
    <body>
        <form id="form1" runat="server">
            <div id="divContent">
            <input type="text" value="123"  id="txtOne" />
            <input type="text" value="456"  id="txtTwo" />
            <input type="button" value="replaceControl" onclick="replaceControl();" />
            <input type="button" value="removeControl()" onclick="removeControl();"  />
        </div>
        </form>
    </body>
    </html>