JQuery Mobile collapsible does not apply to div
<p>I'm very new to both JQuery and Javascript. I have an feed, I would like to display these feed inside a collapsible div AS a collapsible div. I have the following Javascript file:</p>

<pre><code>&lt;script type="text/javascript" src="https://www.google.com/jsapi"&gt;&lt;/script&gt; 
&lt;script type="text/javascript"&gt;
    google.load("feeds", "1");
    google.setOnLoadCallback(showFeed);

    function showFeed() {
      var feed = new google.feeds.Feed("http://www.varzesh3.com/rss");
      feed.setNumEntries(10);
      feed.load(function(result) {
        if (!result.error) {
          var container = document.getElementById("headlines");
          for (var i = 0; i &lt; result.feed.entries.length; i++) {
            var entry = result.feed.entries[i];
            var di = document.createElement("div").setAttributeNode("data-role", "collapsible");
            di.innerHTML = '&lt;h3&gt;' + entry.title + '&lt;/h3&gt;';
            di.innerHTML += '&lt;p&gt;' + entry.contentSnippet + '&lt;/p&gt;';
            container.appendChild(di);
          }
        } else {
            var container = document.getElementById("headlines");
            container.innerHTML = '&lt;li&gt;Get your geek news fix at site&lt;/li&gt;';
        }
      });
    }
&lt;/script&gt;

&lt;body&gt;
    &lt;div data-role="collapsible-set" id="headlines"&gt;&lt;/div&gt; 
&lt;/body&gt;
</code></pre>

<p>This should fetch all my feed names and put them in a collapsible div, it does exactly that but it shows the names as plain HTML text instead of a JQuery Mobile collapsible div.</p>
