Prevent jQuery .html() from removing self closing tag slash

Question

I'm sure most of you know the following:

var str = '<img src="path/to/some/image" />'

$('#selector').html(str);

This will output the following HTML:

<div id="selector">
  <img src="path/to/some/image">
</div>

It removes the self closing "slash" at the end of the img tag because jQuery renders true HTML, not XHTML.

My hands are tied into using a CMS that validates against XHTML so any markup that is copied into or created in the systems WYSIWYG must contain the "slash" at the end of a self closing tag.

My predicament is that I am using the Bootstrap Form Builder to create some quick and dirty forms. This application uses the jQuery .html() to create the rendered HTML. So all the < input > closing tag slashes are being stripped. When I copy and paste the rendered code into my CMS, it won't let me published it.

Anybody have a clever way to prevent .html() from removing the "slashes"? Or at least putting the slashes back in without having to manually do it?

This [question](http://stackoverflow.com/questions/7971716/is-it-ok-to-use-a-self-closing-div-tag) may help — Yogesh, Jul 11 '13 at 07:02
plain javascript method document.getElementById also acts as the jquery.html — Yogesh, Jul 11 '13 at 07:09
The issues is I have a CMS that requires the self closing tag "/>" but jQuery .html removes the / character. Therefore anything output by jQuery .html won't pass this CMS validation. — matteking, Jul 11 '13 at 07:10

score 1 · Answer 1 · answered Jul 11 '13 at 07:17

1

If I read the documentation I see the following text:

This method uses the browser's innerHTML property. Some browsers may not generate a DOM that exactly replicates the HTML source provided. For example, Internet Explorer prior to version 8 will convert all href properties on links to absolute URLs, and Internet Explorer prior to version 9 will not correctly handle HTML5 elements without the addition of a separate compatibility layer.

This makes me believe it is a problem with the browser you are using, rather than a problem with jQuery.

You can possibly use Tidy to turn it into valid xhtml. Googling makes me think that this tool might be able to help you.

answered Jul 11 '13 at 07:17

Sumurai8

20,333
11
66
100

Unfortunately I tried multiple browsers and I got the same result. And I know it isn't an "issue" with jQuery, in fact as you can see here in their bug tracking they just dismiss it because that is the expected functionality and not a bug: http://bugs.jquery.com/ticket/3378 – matteking Jul 11 '13 at 15:55
Not sure if Tidy will help me because the application I am using is just spitting out small snippets of HTML my users are copying and pasting into another system. I would rather not add an extra step for them to "clean" up the HTML/XHTML. Thanks though! – matteking Jul 11 '13 at 15:57

score 1 · Accepted Answer · answered Jul 11 '13 at 17:35

I figured it out! Well, my co-worker did :)

There are a couple extra layers to this since I am using a Form Builder that is rendering the HTML to a textarea.

I had to use a combination of .text() and .html(). Instead of explaining it, here is a code snippet and jsfiddle link which showcases a very simplified version of what is going on:

$('#html').html("<input type='text' />");
var str = $('#html').html();
$("#renderHTML").html(str);

This will output <input type='text'>

$('#text').text("<input type='text' />");
var str1 = $('#text').text();
$("#renderTEXTHTML").html(str1);

And this one will output This will output <input type='text' />

http://jsfiddle.net/xMsgg/1/

score 0 · Answer 3 · answered Jul 11 '13 at 07:39

0

This is not jQuery issue, native javascript innerHTML method works the same. Also this is not depends from DOCTYPE. I think it is browser feature.

answered Jul 11 '13 at 07:39

z1m.in

1,661
13
19

I know it is not a jQuery issue, I was just hoping there was a work around because I NEED that self closing / character. – matteking Jul 11 '13 at 15:58

score 0 · Answer 4 · answered Oct 25 '16 at 08:48

Actually, another workaround is to replace jQuery.html() with XMLSerializer and its' serializeToString method.

As this is not using the DOM and innerHTML but treating your input as "regular" XML, all single tags are kept in tact.

See here: https://developer.mozilla.org/en-US/docs/Web/API/XMLSerializer

Prevent jQuery .html() from removing self closing tag slash

4 Answers4