Lesson learnt with creating DOM element with jQuery

04 April 2008   6 comments   Javascript

Powered by Fusion×

This took me some seriously wasted time to figure out yesterday. What I was trying to do was to create a DOM element of tag type A and insert it into the DOM tree of my page. As I was coding along, everything was working just fine in Firefox but the damn thing wouldn't show up anywhere in IE 6. I debugged and debugged and tried all kinds of different approaches and I just couldn't work it out. Then Karl Rudd gave the right hint on the jQuery mailing list.

Basically, what I was doing was something like this:

var a = $("<a>").attr('href','#').click(somefunction);

What was then so strange is now less surprising. When I changed the <a> to a <span> it actually worked but just looked wrong with the rest of the site I was working on. Here's the correct way of doing it:

var a = $("<a></a>").attr('href','#').click(somefunction);

Notice the difference between <a> and <a></a>. The strange thing is that to reproduce this I created this test.html page but here I noticed that in IE 6 it won't let you add any elements that are enclosing ones that are written as singulars. That's really strange since in the same javascript as the above stuff I did a $("<div>") which was working fine. I'll have to get back to figuring out why that one worked nad the A one didn't.


How the hell did I never know this until now? I've been coding with jQuery for almost a year now and didn't realize this until trying to debug an IE issue just this week. Thanks for the clarification.
Ever try using <a/>? Does that work?
My guess why "<div>" worked and "<a>" didn't is that "div" tags can be nested, while "a" tags cannot; while each browser may have auto-closed the tags somewhere, IE didn't like the nesting.
you saved my day!! thanks man
btw whats the thought behind hiding captcha until user tried to add a comment... :S its annoying. i'm using google chrome

Your email will never ever be published

Related posts

One thing I hate about Linux: cron 31 March 2008
pwdf - a mix of ls and pwd 07 April 2008
Related by keywords:
Difference between $.data('foo') and $.attr('data-foo') in jQuery 10 June 2012
Why I gave up on JQuery UI's autocomplete 20 October 2010
jQuery and Highslide JS 08 January 2008
parentElementsByTagName(doc, tagname, classname) 06 March 2006
In jQuery, using the :visible selector can be dangerous 14 September 2010
Why Django and Grok matters 02 February 2008
QUnit testing my jQuery Mobile site in full swing 17 March 2011
JetBlue a good and bad website 22 February 2007
To $('#foo p') or to $('p', $('#foo')) 24 February 2009
Are you a web developer? Then VisiBone is for you 22 January 2006
V8 < TraceMonkey < SquirrelFish 23 September 2008
RememberYourFriends.com running jQuery 18 January 2007