Lesson learnt with creating DOM element with jQuery

04 April 2008   6 comments   Javascript

Mind That Age!

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

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 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:
Be very careful with your add_header in Nginx! You might make your site insecure 11 February 2018
jQuery and Highslide JS 08 January 2008
I'm back! Peterbe.com has been renewed 05 June 2005
Anti-McCain propaganda videos 12 August 2008
I'm Prolog 01 May 2007