[Webinar] Streamline your web hosting managementRegister Today

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

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

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
JohnLourdu
Asked:
JohnLourdu
1 Solution
 
MrunalCommented:
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
 
JohnLourduAuthor Commented:
No, It will render actual code. Please suggest.
0
 
leakim971PluritechnicianCommented:
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
Never miss a deadline with monday.com

The revolutionary project management tool is here!   Plan visually with a single glance and make sure your projects get done.

 
Chris StanyonCommented:
Its' not a jQuery specific problem - the same would happen in raw Javascript.

Not sure if you can do anything about it :(
0
 
devicCommented:
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
 
JohnLourduAuthor Commented:
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
 
JohnLourduAuthor Commented:
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
 
JohnLourduAuthor Commented:
I have found this plugin useful like iBooks environment.
0

Featured Post

Free Tool: IP Lookup

Get more info about an IP address or domain name, such as organization, abuse contacts and geolocation.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now