高手请进 帮个忙 如何实现动态创建BOX盒子模型 急在在线等。。。。

我的问题是想在页面中根据给定的Class类来动态创建不同风格的BOX盒子，要求边框是用图片作为背景的，请各位高手帮帮吗，小弟我先谢谢了
就是我想在包裹元素的时候将BOX1包裹在Class类为box1_middle_c中怎么实现。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<head>
<title>Mybase一</title>
<script type="text/javascript" src="../js/jquery-1.6.2.min.js"></script>
<script type="text/javascript" src="../js/Mybase.js"></script>
<link href="../css/import_basic.css" rel="stylesheet" type="text/css"/>
<link href="../skins/style.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript">
$(document).ready(function(){
      var div=$("<table border='0'  cellpadding='0' cellspacing='0'><tr><td class='box1_top_l'>&nbsp;</td><td class='box1_top_c'>&nbsp;</td><td class='box1_top_r'>&nbsp;</td></tr><tr><td class='box1_middle_l'>&nbsp;</td><td id='box1_middle_c'></td><td class='box1_middle_r'>&nbsp;</td></tr><tr><td class='box1_bottom_l'>&nbsp;</td><td class='box1_bottom_c'>&nbsp;</td><td class='box1_bottom_r'>&nbsp;</td></tr></table>");     $(".box1").wrap(div);
});
</script>
</head>
<body>
  <div class="box1" width="300" height="400" >asdasdasd</div>
  <div class="box2">sdfsdf</div>
  <p class="box3">sdfsd</p>
  <div class="box4">sdfsdf</div>
</body>
</html>

解决方案 »

  1.   

    直接wrap不行，因为wrap要求一个最内的元素，那就笨一点，先插入再移动过去<div class="box1" width="300" height="400" >asdasd asd 1</div>
      <div class="box2">sdfsdf</div>
      <p class="box3">sdfsd</p>
      <div class="box1" width="300" height="400" >asda dssd asd2</div>
      <div class="box4">sdfsdf</div>
            var div = "<table border='1'  cellpadding='0' cellspacing='0'><tr><td class='box1_top_l'>&nbsp;</td><td class='box1_top_c'>&nbsp;</td><td class='box1_top_r'>&nbsp;</td></tr><tr><td class='box1_middle_l'>&nbsp;</td><td id='box1_middle_c'></td><td class='box1_middle_r'>&nbsp;</td></tr><tr><td class='box1_bottom_l'>&nbsp;</td><td class='box1_bottom_c'>&nbsp;</td><td class='box1_bottom_r'>&nbsp;</td></tr></table>";        $(".box1").each(function() {
                $(div).insertBefore($(this)).find("#box1_middle_c").append($(this));
            });另外，#box1_middle_c" 改成 .classname 会好一些,因为如果你想一个页面加多个盒子，用ID重复的话，在IE下有些版本可能会只识别第一个
      

  2.   

    这样的话在BOX1里的内容不在，#box1_middle_c这个区域里啊
      

  3.   

    郁闷啊 解决了 新的问题有出现了  对box1做浮动的不起效啊   加边距也没有用  谁来帮帮帮忙啊