What am I doing wrong in my Ajax request?

Question

I'm using jquery to create some Ajax request, the code apparently is working fine; but when I inspected the code with firebug, I see the request generate some unexpected a tags. The script is:

$.ajax({
    url: '/some/request/',
    type: 'GET',
    success: function(data){
        $('#main').html(data);

        // To see the error I do this:
        alert(data);
        alert($('#main').html());
    }
});

The alerts returns something like this:

alert(data)->

<div class="list">
    <ul>
        <li><a href="javascript:void(0);">Option 1</a></li>
        <li><a href="javascript:void(0);">Option 2</a></li>
        <li><a href="javascript:void(0);">Option 3</a></li>
    </ul>
</div>

alert($('#main').html())->

<div class="list">
    <a></a>
    <ul>
        <a></a>
        <li><a href="javascript:void(0);">Option 1</a></li>
        <li><a href="javascript:void(0);">Option 2</a></li>
        <li><a href="javascript:void(0);">Option 3</a></li>
    </ul>
</div>

The second return adds some extra tags a ... I don't know why the method $('#main').html(data) is working in that way.

EDIT- MORE INFORMATION:

• I am using Firefox 7.01, but in Google Chrome the same problems occurs.
• I am using jquery 1.6.2
• Example: http://jsfiddle.net/z4rYU/3/

Answer 1

Based on your fiddle, your anchor tag is not closed properly. See corrected string below:

var data = '<div id="main-header"><ul id="breadcrumb"><li class="crumb"><a href="#/">option 1</a></li><li class="crumb"><a href="#/">option 2</a></li></ul>';

//Changed: <a href="#/">option 2<a>
//To:      <a href="#/">option 2</a>

Here's a corrected fiddle .