Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 1551
  • Last Modified:

document.createElement missing self-closing slash

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
sailing_12
Asked:
sailing_12
  • 4
  • 2
  • 2
  • +1
3 Solutions
 
leakim971PluritechnicianCommented:
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
 
Gurvinder Pal SinghCommented:
I think the self closing slash for IMG tag is not required when you use document.createElement
0
 
cyberkiwiCommented:
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
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
sailing_12Author Commented:
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
 
cyberkiwiCommented:
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
 
sailing_12Author Commented:
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
 
sailing_12Author Commented:
0
 
sailing_12Author Commented:
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
 
leakim971PluritechnicianCommented:
Thanks for the points!
0

Featured Post

Become an Android App Developer

Ready to kick start your career in 2018? Learn how to build an Android app in January’s Course of the Month and open the door to new opportunities.

  • 4
  • 2
  • 2
  • +1
Tackle projects and never again get stuck behind a technical roadblock.
Join Now