使用jQuery重构HTML

这是之前的HTML …

<p><a href="#" id="restructure">Toggle Structure</a></p>
<div id="modules">
  <div class="two_column_Box">
    <div class="column_left">
      <p>Some text</p>
    </div>
    <div class="column_right">
      <p>Some text</p>
    </div>
  </div>
  <div class="two_column_Box">
    <div class="column_left">
      <p>Some text</p>
    </div>
    <div class="column_right">
      <p>Some text</p>
    </div> 
  </div> 
</div>

并在html之后……

<p><a href="#" id="restructure">Toggle Structure</a></p>
<div id="modules">
  <div class="column_left">
    <p>Some text</p>
  </div>
  <div class="column_right">
    <p>Some text</p>
  </div>
  <div class="column_left">
    <p>Some text</p>
  </div>
  <div class="column_right">
    <p>Some text</p>
  </div>
</div>

我可以删除额外的div,没有麻烦,但后来把它们放回Go – 我只是不知道如何从纯文本和现有DOM元素构建html.这是我到目前为止的代码……

<script type="text/javascript" charset="utf-8">
  $(document).ready(function(){  
    $('#restructure').toggle(
      function() {
        alert('removing structure');
        var module_list = $("#modules > div > div");
        $("#modules").html(module_list);
      },function() {
        alert('replacing structure');
        var idx = 1;
        var next;
        var structure = $("");
        while((next = $('#modules > div:nth-child(' + idx++ + ')')).length) {
          var element = next.clone();
          if(idx%2==1) {
            $(structurE).append('<div class="two_column_Box">').append(element);
          } else {
            $(structurE).append(element).append('</div>');
          }
        }
        $("#modules").html(structurE);
      }
    );
  });
  </script>

任何帮助使得切换的第二个功能起作用(或者在工作代码的更惯用的版本中)都将非常感激……