Constructing HTML after getJSON works in Safari but not in Chrome or Firefox
<p>Hi i'm actually a newbie using javascript and html/css.</p>

<p>I can't understand why my script works on safari, but not on chrome and firefox...
any ideas?</p>

<p>EDIT: Both in chrome anda firefox the ul and li elements do not show... Also the previous alerts don't work. I'll check errors in the console and edit the post again</p>

<pre><code>&lt;!DOCTYPE html&gt;
&lt;html&gt;
    &lt;head&gt;
        &lt;script src="http://code.jquery.com/jquery-latest.js"&gt;&lt;/script&gt;
    &lt;/head&gt;
    &lt;body&gt;
        &lt;div id="patients" style="text-align:center"&gt;

        &lt;/div&gt;
        &lt;script type="text/javascript"&gt;
            $.getJSON("http://www.url.com/json",
                      function(data) {

                      var items = [];
                      alert(data[1].patient);
                      alert(data[1].hr);

                      $.each(data, function(index, val) {
                             items.push('&lt;li id="' + index + '"&gt;' + val.patient + '&lt;div style="display: none" id="'+val.patient+'"&gt;&lt;/div&gt;&lt;/li&gt;');
                             });

                      $('&lt;ul/&gt;', {
                        'class': 'my-new-list',
                        html: items.join('')
                        }).appendTo('#patients');


                      });
            &lt;/script&gt;

    &lt;/body&gt;
&lt;/html&gt;
</code></pre>
