Question

If you have a regular link in HTML, you can get the value of its href attribute using jQuery’s attr function:

<a id="testLink" href="test/link.html">Test Link</a>`

>>> $('#testLink').attr('href');
testLink.html

Example:

• http://jsfiddle.net/63RsQ/1/

However, if the link was created using jQuery, then in IE 7, this function returns the absolute URL that the browser would access if you clicked on the link (e.g. https://stackoverflow.com/questions/ask/testLink.html), instead of the literal value of the href attribute.

Example:

• http://jsfiddle.net/xtrEB/10/

I’ve also tried this, this.href, and this.getAttribute('href'), and they all return an absolute URL.

Is there any way to get the literal value of the href attribute of a link created by jQuery in IE 7?

Answer 1

If you are creating the link in a way that jQuery is forced to use .innerHTML, it will work not properly and is documented in: http://api.jquery.com/html/ (also http://api.jquery.com/jQuery/#creating-new-elements) :

This method uses the browser’s innerHTML property. Some browsers may
not generate a DOM that exactly replicates the HTML source provided.
For example, Internet Explorer prior to version 8 will convert all
href properties on links to absolute URLs, and Internet Explorer prior
to version 9 will not correctly handle HTML5 elements without the
addition of a separate compatibility layer.

To fix it, create the link in a way that doesn’t force jQuery to use .innerHTML:

$('#test').append( $("<a>", {href: "test/link.html", text: "Test Link"}));

http://jsfiddle.net/xtrEB/12/