Solved

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

Posted on 2014-02-11
8
3,243 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
[X]
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
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
What Is Transaction Monitoring and who needs it?

Synthetic Transaction Monitoring that you need for the day to day, which ensures your business website keeps running optimally, and that there is no downtime to impact your customer experience.

 
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

SharePoint Admin?

Enable Your Employees To Focus On The Core With Intuitive Onscreen Guidance That is With You At The Moment of Need.

Question has a verified solution.

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

Introduction A frequently asked question goes something like this:  "I am running a long process in the background and I want to alert my client when the process finishes.  How can I send a message to the browser?"  Unfortunately, the short answer…
This article discusses how to create an extensible mechanism for linked drop downs.
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…

688 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