使用Javascript在div中包装元素

我对窗口调整上的div对齐问题感到非常恼火。我想将元素包装在div中，这样在调整窗口大小后它们就不会离开它们的确切位置。有没有一种方法可以使用Javascript将元素包装在父级

中。还建议使用javascript处理

resize（）

和

zoom（）

事件等可能克服此问题的最佳方法。如果没有，请使用Jquery建议可能的解决方案。

HTML：

<div id ="top-left"></div>
<div id ="top-right"></div>
<div id ="bottom-left"></div>
<div id ="bottom-right"></div>

​jQuery：

$(document).ready( function(){
    $('body').append('<div id="container"></div>');
    $('body div').not('#container').each(function() {
        var html = $(this);
        $('#container').append(html);        
    });
});​

$（文档）.ready（函数（）{
$（'body'）。追加（''）；
$（'body div'）。不是（'#container'）。每个（函数（）{
var html=$（这个）；
$（'#container'）.append（html）；
});
});​

演示：

$(document).ready( function(){
    $('body').append('<div id="container"></div>');
    $('body div').not('#container').each(function() {
        var html = $(this);
        $('#container').append(html);        
    });
});​