Javascript 交换两个DIV元素？（一个预览另一个占用整个页面）-编辑：交换DIV和IFRAME

我有一个包含两个DIV元素的HTML页面。我想以这样的方式安排这两个，其中一个占据整个页面，另一个显示为浏览器右上角的一个小预览框。当用户单击preview时，该DIV的内容将与占据页面的DIV交换

div元素是googlewidget。（带注释的时间线、运动图表等）

编辑： 我使用wdm提供的方法来实现上述问题。现在的问题是我有一个IFRAME，我想用一个DIV元素交换它。我将IFRAME放在DIV标记中，如下所示

  <div class="b small">
    <iframe src="http://somerandomsite.com" name="framename" id="frameid"> </iframe> 
  </div>

iframe未正确调整大小。我认为这是因为CSS格式化没有在iframe元素上正常工作

---

有没有办法调整iframe的大小，使其在单击时改变大小

你可以用四个div来做到这一点-两个全尺寸的div和两个缩略图。您的标记可能如下所示：

<div id="thumb1"> ... </div>
<div id="thumb2"> ... </div>
<div id="fullsize1"> ... </div>
<div id="fullsize2"> ... </div>

---

请查看演示并单击小框。基本上，我只是通过jQuery在两个

div

元素之间交换类

演示：

编辑：带图像的演示：

jQuery

$('.small').live('click', function() {
    $('.big').addClass('small').removeClass('big');
    $(this).removeClass('small').addClass('big');
});

HTML

<div id="wrap">
    <div class="a big"></div>
    <div class="b small"></div>
</div>

---

CSS（见演示）

谢谢。拥有多个视角总是好的。帮助大家学习！感谢wdm，declan，我使用示例div元素尝试了这两种方法，并且都很好地工作。（wdm的方法正是我想要的）

<div id="wrap">
    <div class="a big"></div>
    <div class="b small"></div>
</div>