怎么让两个DIV之间互换位置

2012-10-26

如何让两个DIV之间互换位置简单的两个DIV之间互换位置就成，不要特效！！我需要DIV本身的所有属性都不能变包

如何让两个DIV之间互换位置
简单的两个DIV之间互换位置就成，不要特效！！

我需要DIV本身的所有属性都不能变包括ID
有没有大虾给个解决方案！

JScript code

<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>

[解决办法]
这个是一个方法:

HTML code

<!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>
[解决办法]
这样也是一样的,原理差不多
JScript code<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>
[解决办法]
JScript code    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();
[解决办法]
position：relative 强制元素相对本身位置移动

如果 三个div 大小位置不变的话  那么 用这个样式 ＋ 位置偏移就可以了
[解决办法]
有id就好办了 

1 用jquery 获取div1 和div3   
 
2 删除div1 并插入div3
3 删除div3 并插入div1

热点排行

JavaScript

怎么让两个DIV之间互换位置