Solved

document.createElement missing self-closing slash

Posted on 2010-08-25
10
1,477 Views
Last Modified: 2013-11-19
I notice that the code below generates IMG tags that have no self-closing slash. I think this may be keeping jQuery Thickbox from working correctly on my page images.

Anyone know how to force the / ?
var image = document.createElement("img");

  image.src = "images/events/shows/" + imagePath + "thumbs/" + imageNum + "_tn.jpg";

hyperlink.appendChild(image);

Open in new window

0
Comment
Question by:sailing_12
  • 4
  • 2
  • 2
  • +1
10 Comments
 
LVL 82

Assisted Solution

by:leakim971
leakim971 earned 250 total points
ID: 33528106
if you've jQuery inside :


var src = "images/events/shows/" + imagePath + "thumbs/" + imageNum + "_tn.jpg";
$("#hyperlinkID").append("<image src='" + src + "' />"); // where hyperlinkID is the ID of the hyperlink (anchor)

Open in new window

0
 
LVL 40

Expert Comment

by:gurvinder372
ID: 33528128
I think the self closing slash for IMG tag is not required when you use document.createElement
0
 
LVL 58

Expert Comment

by:cyberkiwi
ID: 33528204
Re the first post, the tag name is img not image.

var imagesrc = "images/events/shows/" + imagePath + "thumbs/" + imageNum + "_tn.jpg";
$(hyperlink).append("<img src='" + imagesrc + "' />");

However, as far as I can tell, this should have no effect on whatever is causing Thickbox not to work.
In html (not xhtml), an img without self-closing tag is correct.
0
 

Author Comment

by:sailing_12
ID: 33531405
Yes, the self-closing slash is not necessarily required by html standards, but it's the only thing I'm seeing different in my context between a hyperlinked image that works with thickbox, and one that doesn't. So I'm thinking that maybe jQuery/thickbox needs it to be there regardless of what standard we're coding to.

I haven't actually tested this theory with static markup code - I will do that tonight and report my findings. I guess I'd prefer not to have to include additional jQuery code just to add a slash, if it can be helped - seems to me the document.createElement ought to do this.
0
Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

 
LVL 58

Assisted Solution

by:cyberkiwi
cyberkiwi earned 250 total points
ID: 33537068
Reference:

http://stackoverflow.com/questions/348736/xhtml-is-writing-self-closing-tags-for-elements-not-traditionally-empty-bad-pra

Self-closing tags are not really valid HTML per the HTML 4 spec.  XHTML yes but not HTML.  See this quote from the link

[in IE, having elements such as <span /> in your mark-up will cause all kinds of problems with DOM traversal methods in JavaScript.]

Now go back a bit and read Alan Storm's wonderful mini-article about HTML vs XHTML and where the web is going (HTML5 vs XHTML2).

As far as I recall (and this is without testing this statement - I stand to be corrected), document.createElement works on the DOM as HTML so it produces whatever is HTML-valid.  This includes no closing tags for IMG, INPUT etc.  Like I said, I haven't tested with IE8/9 nor the very latest Fx/Chrome/Safari, so I would encourage you to do some testing and verify for yourself that this is the case.

Let us know if using static html (with closing tag) fixes your Thickbox issue.
0
 

Author Comment

by:sailing_12
ID: 33541497
Static HTML works with thick box with or without the closing tag so that is apparently not the issue.

It seems that thickbox is having issue with the dynamically generated HTML.
0
 

Accepted Solution

by:
sailing_12 earned 0 total points
ID: 33611883
0
 

Author Comment

by:sailing_12
ID: 33611931
I found my own solution to the issue, but would like to award points to those that made helpful suggestions along the way. I did not want to use the 'accept multiple solutions' option as this would incorrectly log the wrong actual solution into my knowledgebase.

Thanks.
0
 
LVL 82

Expert Comment

by:leakim971
ID: 33674968
Thanks for the points!
0

Featured Post

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Introduction Since I wrote the original article about Handling Date and Time in PHP and MySQL (http://www.experts-exchange.com/articles/201/Handling-Date-and-Time-in-PHP-and-MySQL.html) several years ago, it seemed like now was a good time to updat…
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
Viewers will learn about if statements in Java and their use The if statement: The condition required to create an if statement: Variations of if statements: An example using if statements:
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…

895 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

16 Experts available now in Live!

Get 1:1 Help Now