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

暗夜螃蟹 2012-10-12 01:22:30

简单的两个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>

...全文

12108 7 打赏收藏转发到动态举报

写回复

用AI写文章

7 条回复

切换为时间正序

请发表友善的回复…

发表回复

爱在夕阳下 2012-10-12

打赏
举报

有id就好办了

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

陈jack 2012-10-12

打赏
举报

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

KK3K2005 2012-10-12

打赏
举报

position：relative 强制元素相对本身位置移动

如果三个div 大小位置不变的话那么用这个样式＋位置偏移就可以了

義東 2012-10-12

打赏
举报



    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，你可以按这个思路自己写脚本

猿敲月下码 2012-10-12

打赏
举报

这样也是一样的,原理差不多

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

猿敲月下码 2012-10-12

打赏
举报

这个是一个方法:



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