如何让两个DIV之间互换位置

简单的两个DIV之间互换位置就成，不要特效！！我需要DIV本身的所有属性都不能变包括ID
有没有大虾给个解决方案！
<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  var p_1=document.getElementById('p1');  
  var p_2=document.getElementById('p2');  var d_c=document.createElement("div");
      d_c = p_1;
      d_c.id = 'p3'  
  var d_d=document.createElement("div");
      d_d = p_2;  
      d_d.id='p4'  
      //alert(d_d.innerHTML);
      $(".btn1").click(function(){
         
       //$("#p2").replaceWith($("#p4").html());
       //$("#p1").replaceWith($("#p3").html());
       
       $("#p2").replaceWith("<div>4444</div>");
       $("#p1").replaceWith("<div>3333</div>");
       //$("#p1").replaceWith($t("#p4").html());     // alert($("#p3").text());
      //alert($("#p4").text());
                          
       });   });
</script><style>
div{height:20px;background-color:yellow}
</style></head>
<body>
<div id='p1'>This is a paragraph.11111</div>
<div id='p2'>This is another paragraph.222222</div>
<div id='div1'>333333333</div><button class="btn1">用粗体文本替换所有段落</button>
</body>
</html>

解决方案 »

  1.   

    其实简单描述一下，
    <div>111111</div>
    <div>222222</div>
    <div>333333</div>我只想要1跟3换，2的位置不要动！！
      

  2.   

    这个是一个方法:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
    <HTML>
    <HEAD>
    <TITLE> New Document </TITLE>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
    <script type="text/javascript">
    window.onload = function() {
    var arr = $('#divs').find('div').toArray();// 把三个div放进数组里面
    var temp;
    // 1 3对调
    temp = arr[0];
    arr[0] = arr[2];
    arr[2] = temp; $('#divs').html(arr)
    }
    </script>
    </HEAD><BODY>
    <div id="divs">
    <div>111111</div>
    <div>222222</div>
    <div>333333</div>
    </div>
    </BODY>
    </HTML>
      

  3.   

    这样也是一样的,原理差不多
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
    <script type="text/javascript">
    window.onload = function() {
    changeDiv(0,2)
    }function changeDiv(firstIndex,secondIndex){
    var $divs = $('#divs').find('div');
    var firstDiv = $divs.eq(firstIndex);
    var secondDiv = $divs.eq(secondIndex); var temp;
    temp = firstDiv.html();
    firstDiv.html(secondDiv.html());
    secondDiv.html(temp);
    }
    </script>
      

  4.   


        var $div1 = $("#p1");
        var $div3 = $("#p3");
        var $temobj1 = $("<div></div>");
        var $temobj2 = $("<div></div>");
        $temobj1.insertBefore($div1);
        $temobj2.insertBefore($div3);
        $div1.insertAfter($temobj2);
        $div3.insertAfter($temobj1);
        $temobj1.remove();
        $temobj2.remove();基本思路就是先在要移动的那两个div前面插入一个临时对象，以标记它们的位置，然后将第一个要移动的div插入到第二个临时对象后面，将第二个div插入到第一个临时对象后面，最后删除那两个临时对象。
    我这里用的是JQuery，你可以按这个思路自己写脚本
      

  5.   

    position：relative 强制元素相对本身位置移动如果 三个div 大小位置不变的话  那么 用这个样式 ＋ 位置偏移就可以了
      

  6.   

    没有完全理解你的意思，不过你这样看看左边的div飘右，右边的飘左，这样子看看：float：left；float：right
      

  7.   

    有id就好办了  1 用jquery 获取div1 和div3 
    2 删除div1 并插入div3
    3 删除div3 并插入div1