asked on

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?

Mrunal

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.

JohnLourdu

ASKER

No, It will render actual code. Please suggest.

leakim971

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

Chris Stanyon

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

Not sure if you can do anything about it :(

devic

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.

JohnLourdu

ASKER

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.

ASKER CERTIFIED SOLUTION

JohnLourdu

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

JohnLourdu

ASKER

I have found this plugin useful like iBooks environment.