title: re-assign dom nodes to different dijit containers
body: <p>I am trying to toggle from a Tab Container view to Title Pane view.  I am pulling in all dom objects with a class of "cPane".  Initially I am assigning as dijit.layout.ContentPane, when I hit the toggle button I am trying to re-assign to dijit.TitlePane.</p>
  
  <p>It seems the dom element are not keeping its attributes.  I have tried every "destroy" method, but when I assign them to TitlePane they are blank.  How can I re-assign dom nodes without losing attributes?  Thanks.</p>
  
  <p>Here is my code:  <a href="http://jsfiddle.net/afarris/gFXnH/11/" rel="nofollow">http://jsfiddle.net/afarris/gFXnH/11/</a></p>
  
  <pre><code>dojo.require("dojo.parser");
  dojo.require("dijit.form.Button");
  dojo.require("dijit.layout.TabContainer");
  dojo.require("dijit.layout.ContentPane");
  dojo.require("dijit.TitlePane");
  
  dojo.addOnLoad(function() {
  
  dojo.parser.parse("widget");
  
  var cc = dojo.byId("contentContainer");
  
  dojo.query(".cPane").forEach(function(n){
     new dijit.layout.ContentPane({
          title: dojo.attr(n, "title")
      }, n);
  });
  
  var dtc = new dijit.layout.TabContainer({
     style: "height:100px; width: 100%;"
  }, cc);
  
  dtc.startup();    
  
  var tabMode = true;
  
  
  new dijit.form.ToggleButton({
      showLabel: true,
      checked: false,
      onChange: function(val) {
          if (tabMode == true) {
              dtc.destroyDescendants(true);
              dojo.query(".cPane").forEach(function(n){
              console.log('found contentPane');
                  new dijit.TitlePane({
                      title: dojo.attr(n, "title"), open: "true"
                  }, n), cc;
              });            
          }
  
      },
      label: "toggle"
  },
  "viewToggle");    
  
  });
  
  &lt;div class="tundra"&gt;
  &lt;div id="widget"&gt;
  &lt;button id="viewToggle"&gt;&lt;/button&gt;
  &lt;div id="contentContainer"&gt;
      &lt;div class="cPane" title="First" style="width: 100%; height: 100px"&gt;test&lt;/div&gt;
      &lt;div class="cPane" title="Second" style="width: 100%; height: 100px"&gt;&lt;p&gt;demo&lt;/p&gt;&lt;/div&gt;
   &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>