title: jQuery ui Accordion dynamic content
body: <p>I have an jQuery UI accordion.</p>
  
  <p>in my html I only have a div declared</p>
  
  <pre><code>&lt;div id="mydiv"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>js</p>
  
  <pre><code>$("#mydiv").accordion();
  </code></pre>
  
  <p>I also have a function that creates the content of "mydiv"<br/>
  Rendered html:</p>
  
  <pre><code>&lt;h3&gt;123&lt;/h3&gt;
  &lt;div&gt;content&lt;/div
  &lt;h3&gt;456&lt;/h3&gt;
  &lt;div&gt;content&lt;/div
  &lt;h3&gt;789&lt;/h3&gt;
  &lt;div&gt;content&lt;/div
  </code></pre>
  
  <p>the accordion does not work because if I look in my source the html is not changed what is normal. I used the .append method to add contend to "mydiv".
  (I tried .html also)</p>
  
  <p>Is there a better way to edit the html so the accordion will work as it should be. (Does javascript/jQuery have a stringbuilder like C#?)</p>
  
  <p>UPDATE:</p>
  
  <p>THE FUNCTION I USED TO ADD THE HTML TO MY PAGE</p>
  
  <pre><code>function GetSectionList(jsonurl) {
    $.getJSON(jsonurl).done(function(data) {
      $.each(data.sections, function(sections, sectionItem) {
        $("#mydiv").append("&lt;h3&gt;" + sectionItem.name + "&lt;/h3&gt;");
        $("#mydiv").append("&lt;div&gt;&lt;p&gt;hello&lt;/p&gt;&lt;/div&gt;");
  
        //$("#mydiv").html("&lt;h3&gt;abc&lt;/h3&gt;&lt;div&gt;test&lt;/div&gt;");
  
        //Get article list
      });
    });
  }
  </code></pre>