jquery append not working in IE/Firefox
<p>I have the following HTML and subsequent jQuery which appends the related HTML elements after the JSON request has been retrieved.  </p>

<p>This implementation works in Google Chrome + Android browser + Safari, but is not populating the data in Firefox or Internet Explorer 9. </p>

<p>*<em>*</em> Works in Chrome, Android browser, Firefox 4 ... does not work in Firefox 3.x and IE.</p>

<p>Static HTML: </p>

<pre><code>   &lt;header class=line&gt;
                       &lt;div class="unit size3of4"&gt;
                            &lt;h2 class="fullname"&gt;&lt;/h2&gt;
                            &lt;h4 class="nickname"&gt;&lt;/h4&gt;
                       &lt;/div&gt;
   &lt;/header&gt;
</code></pre>

<p>The jQuery code:  </p>

<pre><code>&lt;script&gt;
function load_user_info() {
        var content_url = 'rest.api.url.com';
        $.getJSON(content_url, {id:'11xx1122xx11'}, function(data){
            console.log(data);
            $.each(data, function(key, value) {
                if (key == "fullname") {$('.fullname').append(value);}
                else if (key == "nickname") {$('.nickname').append(value);}
            });
         });
    }

 load_user_info();
 &lt;/script&gt;
</code></pre>

<p>Slightly confused about the behavior between browsers.  I can guarantee the JSON request is returning two variables:  fullname &amp; nickname and have confirmed this </p>

<p>In Firefox using the FireBug plugin I see the results of <code>console.log(data)</code>.<br>
In Chrome I see the results of the <code>console.log(data)</code> and the successful display of the fullname &amp; nickname in the HTML after the JSON request.  </p>

<p>Using jQuery 1.6.1 if it helps ... </p>

<p>JSON Output:</p>

<pre><code> {"fullname":"johnny fartburger", "nickname":"jf"}
</code></pre>
