?
Solved

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

Posted on 2014-02-11
8
Medium Priority
?
3,351 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
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
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

VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

Question has a verified solution.

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

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…
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…
Suggested Courses

762 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