日期:2014-05-16  浏览次数:20301 次

高手请进 帮个忙 如何实现动态创建BOX盒子模型 急在在线等。。。。
我的问题是想在页面中根据给定的Class类来动态创建不同风格的BOX盒子,要求边框是用图片作为背景的,请各位高手帮帮吗,小弟我先谢谢了


就是我想在包裹元素的时候将BOX1包裹在Class类为box1_middle_c中怎么实现。
HTML code
<!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>


------解决方案--------------------
直接wrap不行,因为wrap要求一个最内的元素,那就笨一点,先插入再移动过去
HTML code

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