2个div内容交换不用innerHTML似乎办不到？

我试过了<div id="a1">
   <div id="top1">....................</div>
</div><div id="a2">
   <div id="top2">....................</div>
</div>
var t1=document.getElementById("top1");
var t2=document.getElementById("top2");document.getElementById("a1").appendChild(t2);
document.getElementById("a1").removeChild(t1);
document.getElementById("a2").appendChild(t1);
document.getElementById("a2").removeChild(t2);此法错误
提示Uncaught Error: NOT_FOUND_ERR: DOM Exception 8 据我推测是document.getElementById("top1");  等2个的引用失效了，怎么处理？

解决方案 »

  1.   

    我把最后一句注释掉就没有了<body>
    <div id="a1">
      <div id="top1">1111</div>
    </div><div id="a2">
      <div id="top2">2222</div>
    </div>
    <script>
    var t1=document.getElementById("top1");
    var t2=document.getElementById("top2");document.getElementById("a1").appendChild(t2);
    document.getElementById("a1").removeChild(t1);
    document.getElementById("a2").appendChild(t1);
    //document.getElementById("a2").removeChild(t2);
    </script>
    </body>
      

  2.   

    DOM对象有一个document属性，某些意义上讲是引用类型，第一句话
    document.getElementById("a1").appendChild(t2);
    里把t2作为了a1的子节点，此时a2里就没有t2了，最后一句
    document.getElementById("a2").removeChild(t2);
    又试图从a2里移除一个已经不在的子节点，自然是找不到的。DOM对象的cloneNode()方法会产生一个”孤岛“一样的副本，可以查阅下。
      

  3.   


    从你的回答中联系上一次的回答，我发现问题<body>
        <div id="tip1" style="width:100px;height:100px;border:1px solid red">
            <div id="sp" style="height:50px;height:50px;border:1px solid blue"></div>
        </div>
        <div id="tip2" style="width:100px;height:100px;border:1px solid green"></div>
        
        <script type="text/javascript">
            var sp = document.getElementById("sp");
            var tip1 = document.getElementById("tip1");
            var tip2 = document.getElementById("tip2");
            sp.onclick = function (e) {
                var e = e || window.event;
                if (!document.all) e.stopPropagation()
                else window.event.cancelBubble = true
                alert(111);
            };
            tip1.onclick = function () {
                this.removeChild(sp);
    //这句话，按你说，已经删除了sp节点，应该没了，为什么没报错，
    但是把这句话注释掉，也没错，怎么回事？
                tip2.appendChild(sp);
            };
        </script>
    </body>
      

  4.   

    tip1.onclick = function () {
    try {
    this.removeChild(sp);//点击tip1两次一定会报错，应该删掉此句
    tip2.appendChild(sp);
    } catch (ex) {
    alert(ex.message);
    }
    };
      

  5.   

    用对象的操作方式也是可以的。我想问为什么用innerHTML这么方便，你为什么不用呢。
      

  6.   


    innerHTML可以重复交换内容，但注册事件失效，要重新绑定节点对象只能交换一次，但保持注册事件
      

  7.   

    不需要removeChild的，将已经在的节点appendChild到其它节点时，其效果实际上就是移动，原来的位置上已经没有这个节点了。
      

  8.   

    1。 2个div内容交换不用innerHTML似乎办不到？
     对于一些情况（包括你这个例子）来说，用innerText也可以。2。考虑到方便保留事件的方面，就讨论一下楼主这个现象的原因。其实如果你得空多看点程序，就会发现，很多程序里在appendChild之前只是CreateObject出一个元素，此时这个元素是独立存在的，并不从属于任何其它对象，直至被appendChild附加到其它对象中。document.getElementById("a1").removeChild(t1);
    此时已经把T1从A1中剥离出来，但它只是恢复到刚刚被创建时的独立状态中，并不是被置为NULL
    document.getElementById("a2").appendChild(t1);
    因此你下面还可以把T1再加到A2中去。所以这两条语句没有报错。document.getElementById("a1").appendChild(t2);
    这一条，已经改变了T2的从属关系。
    document.getElementById("a2").removeChild(t2);
    再执行这一条时，由于无视了上面的改变，自然出现错误。
      

  9.   

    也就是说，其实你本来只需要两条语句却写了四条，多写多错啊<script>
    var t1=document.getElementById("top1");
    var t2=document.getElementById("top2");
    ///////
    document.getElementById("a1").appendChild(t2);
    document.getElementById("a2").appendChild(t1);
    ///////
    </script>