jQuery not creating links in IE/Chrome, works in Firefox
<p>I'm trying to use jQuery 1.4.1 to parse an XML document and construct a list of links based on the content of this XML.  So far I have this all working quite well in Firefox.  However, when I view the same page in IE and Chrome, I see the <code>&lt;div&gt;</code> and <code>&lt;li&gt;</code> elements created, but the <code>&lt;a&gt;</code> elements do not appear.  I'm sure I'm missing something simple but after looking at this for a while now, I'm not seeing it.</p>

<p>HTML/JavaScript:</p>

<pre><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
&lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
&lt;script src="/Scripts/jquery-1.4.1.js" type="text/javascript"&gt;&lt;/script&gt;
&lt;script type="text/javascript"&gt;
    $(document).ready(function () {
        $("#result").ajaxError(function () {
            $(this).text("An error occurred while retrieving the site map");
        });

        // Get the site map XML
        $.get("SiteMap.xml", function (data) {
            // The div element that will contain our menu
            var menu = $("#menu");

            // Iterate over each &lt;Group&gt; element
            $(data).find('Group').each(function () {
                // Create a new div to contain the current group
                var group = $("&lt;div&gt;").text($(this).attr("name"));

                // Create a new list for the current group
                var list = $("&lt;ul&gt;");

                // Now iterate over the &lt;Page&gt; elements contained in the current &lt;Group&gt; element
                $(this).find("Page").each(function () {
                    // Note that since we're doing a nested each(), the context of $(this)     changes
                    // Create a list item and a link for the current page, append to the list
                    var item = $("&lt;li&gt;");
                    var link = $("&lt;a&gt;").attr({ href: $(this).attr("url"), text: $(this).attr    ("title") });

                    item.append(link);
                    list.append(item);
                });

                // Append the list to the group's div and then append the group to the menu
                group.append(list);
                menu.append(group);
            });

            $("#result").text("jQueryDemo Site Map");
        });
    });       
&lt;/script&gt;
    &lt;body&gt;
        &lt;div id="result"&gt;&lt;/div&gt;
        &lt;div id="menu"&gt;&lt;/div&gt;
    &lt;/body&gt;
    &lt;/html&gt;
</code></pre>

<p>The XML that is being parsed is the following:</p>

<pre><code>&lt;SiteMap&gt;
    &lt;Group name="Selectors"&gt;
      &lt;Page url="SelectById.htm" title="Select By Id" /&gt;
      &lt;Page url="SelectByCss.htm" title="Select By CSS Class" /&gt;
      &lt;Page url="SelectByElement.htm" title="Select By DOM Element" /&gt;
    &lt;/Group&gt;
    &lt;Group name="Events"&gt;
      &lt;Page url="Bind.htm" title="Bind" /&gt;
      &lt;Page url="Change.htm" title="Change" /&gt;
      &lt;Page url="Click.htm" title="Click" /&gt;
      &lt;Page url="Hover.htm" title="Hover" /&gt;
    &lt;/Group&gt;
    &lt;Group name="AJAX"&gt;
      &lt;Page url="Ajax.htm" title="Ajax" /&gt;
      &lt;Page url="AjaxError.htm" title="Ajax Error" /&gt;
      &lt;Page url="Get.htm" title="Get" /&gt;
    &lt;/Group&gt;
    &lt;Group name="Animation"&gt;
      &lt;Page url="Fade.htm" title="Fade" /&gt;
      &lt;Page url="Slide.htm" title="Slide" /&gt;
    &lt;/Group&gt;
    &lt;Group name="DOM Manipulation"&gt;
      &lt;Page url="Append.htm" title="Append" /&gt;
      &lt;Page url="AppendTo.htm" title="AppendTo" /&gt;
      &lt;Page url="Clone.htm" title="Clone" /&gt;
      &lt;Page url="Each.htm" title="Each" /&gt;      
    &lt;/Group&gt;
&lt;/SiteMap&gt;
</code></pre>

<p>Thanks in advance for any help!</p>
