Lesson learnt with creating DOM element with jQuery

04 April 2008   6 comments   Javascript

Mind That Age!

This blog post is 9 years old! Most likely, its content is outdated. Especially if it's technical.

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
Thank you for posting a comment

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 Keyword:
Some tips on learning React 04 August 2015
Difference between $.data('foo') and $.attr('data-foo') in jQuery 10 June 2012
QUnit testing my jQuery Mobile site in full swing 17 March 2011
Why I gave up on JQuery UI's autocomplete 20 October 2010
In jQuery, using the :visible selector can be dangerous 14 September 2010
Related by Text:
Ultrafast loading of CSS 01 September 2017
createElement('a') with a javascript href 21 November 2005
Difference between $.data('foo') and $.attr('data-foo') in jQuery 10 June 2012
US License Plate Spotter (part 2) 08 August 2012
Web Performance Optimization of a Single-Page-App and web fonts 16 March 2017