CODEWITHSUNDEEP
jquery
matteking
matteking

Reputation: 108

Prevent jQuery .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);

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?

Upvotes: 4

Views: 6563

Answers (4)

bjoernklose
bjoernklose

Reputation: 46

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

Upvotes: 0

matteking
matteking

Reputation: 108

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/

Upvotes: 1

z1m.in
z1m.in

Reputation: 1661

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.

Upvotes: 0

Sumurai8
Sumurai8

Reputation: 20737

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.

Upvotes: 1

Related Questions