Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people, just like you, are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
Solved

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

Posted on 2014-02-11
8
3,086 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
Free Tool: Postgres Monitoring System

A PHP and Perl based system to collect and display usage statistics from PostgreSQL databases.

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.

 
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
 
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

Free Tool: Port Scanner

Check which ports are open to the outside world. Helps make sure that your firewall rules are working as intended.

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.

Question has a verified solution.

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

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 …
OverviewThis article demonstrates a simple search form using AJAX. The purpose of the article is to demonstrate how to use the same code to render a page and javascript (JQuery) and AJAX to make subsequent calls to refine the results. The princip…
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…

808 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