Solved

How to prevent jQuery .append()/.html() from removing self closing tag slash?

Posted on 2014-02-11
8
2,986 Views
Last Modified: 2014-05-17
I'm sure most of you know the following:
var str = '<img src="path/to/some/image" />';
 $('#selector').html(str);

Open in new window

This will output the following HTML:
<div id="selector">
  <img src="path/to/some/image">
</div>

Open in new window

It removes the self closing "slash" at the end of the img tag because jQuery renders true HTML, not XHTML.
But iBooks validates against XHTML. So it denies to show the image.
Any other way to prevent .html()/.append() from removing the "slashes"? Or at least putting the slashes back in without having to manually do it?
0
Comment
Question by:JohnLourdu
8 Comments
 
LVL 22

Expert Comment

by:Mrunal
ID: 39852584
Hi,
I am not sure but you can try with .text instead of .html. like:
var str = '<img src="path/to/some/image" />';
 $('#selector').text(str);

Open in new window


I am sure that it will add self closing tag but just check whether it is rendering image properly or not.
0
 

Author Comment

by:JohnLourdu
ID: 39852690
No, It will render actual code. Please suggest.
0
 
LVL 82

Expert Comment

by:leakim971
ID: 39853050
Check the code of the jQuery plugin, look for :

rxhtmlTag = /<(?!area|br|col|embed|hr|img|input|link|meta|param)(([\w:]+)[^>]*)\/>/gi

Used in jQuery.html
value = value.replace( rxhtmlTag, "<$1></$2>" );

so we have :

'<img src="path/to/some/image" />'.replace( rxhtmlTag, "<$1></$2>" );

Which produce : "<img src="path/to/some/image" />"

So the answer is : jQuery don't remove the trailing slash

What DOCTYPE are you using? A valid xhtml one?
Just try to add manually the igm+trailing slash inside the body part of your page andcheck with your browser it it's still present
0
 
LVL 43

Expert Comment

by:Chris Stanyon
ID: 39853062
Its' not a jQuery specific problem - the same would happen in raw Javascript.

Not sure if you can do anything about it :(
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 25

Expert Comment

by:devic
ID: 39853115
2000 I did already some sites and I was sure I know everything about html. One day comes one and ask me, what should he learn XHTML or HTML. I had no reason, why he should use XHTML. Today I did hundreds sites and I still have no answer why should someone  use XHTML over HTML.
0
 

Author Comment

by:JohnLourdu
ID: 39855305
Apple iBooks accepts XHTML flavour. I have tested both
<!DOCTYPE html>

Open in new window

and
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

Open in new window

doctypes. Both docyptes, trailing slash removed. But safari renders image correctly. But iBooks refused to show image. Please suggest.
0
 

Accepted Solution

by:
JohnLourdu earned 0 total points
ID: 40046418
I have found some js plugin in below site: https://xhtmljs.codeplex.com/.
Unfortunately, there is no documentation available.
I have no idea how to use this script. Please advice how to use this script.
0
 

Author Closing Comment

by:JohnLourdu
ID: 40071903
I have found this plugin useful like iBooks environment.
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

This article will give core knowledge of JavaScript and will head in to your first JavaScript program. I am Durvesh Naik and I am here to deal with this series of JavaScript. I will teach you JavaScript in part wise , as its quite boring to read big…
Introduction Got endorsements from your clients?  Great!  There is almost nothing better than word-of-mouth advertising.  But how can you do that on the internet?  Sure you can make a page for endorsement quotations and list them all, but who is …
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

867 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

22 Experts available now in Live!

Get 1:1 Help Now