Question

I am creating a LI and appending it to the UL using JQUERY code.

     listHtml = "<li id='ordli' whereaboutid='' action='Insert' onthefly='True' class='myDragClass'>" +
    "<div class='orderBox'>" +
    "<span><a href='#' id='114' title='delete' class='itemOrderDelete'>X</a></span></div>" +
    "</li>";

$(this).append(listHtml);

The issue is, IE renders the href with the page url instead of #.

In Firefox 

<a href='#' id='114' title='delete' class='itemOrderDelete'>X</a>

This is correct

But in IE (Compatibility mode)

<a href='http://localhost:1224/pages/index.aspx#' id='114' title='delete' class='itemOrderDelete'>X</a>

This is incorrect

Any idea why the URL is appended in HREF. How to eliminate it? Thanks in advance.

Answer 1

yes, that happens to IE9 in IE7 compatibility, you can try this fix:

FOR TEST

HTML:

JS

var listHtml = $('<li id="ordli" whereaboutid="" action="Insert" onthefly="True" class="myDragClass"> \
    <div class="orderBox"> \
    <span><a href="" id="114" title="delete" class="itemOrderDelete">X</a></span></div> \
    </li>');

$(listHtml).find('a').attr('href', '#');

$('ul').append(listHtml);

alert($('ul').html());

test