Question

This may be too much info but here you go… User inputs a url and the url is sent to the backend via ajax to confirm it exists. If it does, it returns the url and the contentType (text/html, image/jpeg…ect). Code below is the ajax success callback.

var template = 
"<span class='urlFile'>"+data.contentType+'</span>'+
"<span class='urlPath' title="+data.url+'>'+data.url+'</span>';

$(template).prependTo(fieldWrapper);

The problem is the resulting html renders partially out of order. Below is the output complements of Firebug (Chrome). Note the data.url (http://api.jquery.com/appendto/) is not wrapped in the span.urlPath.

<span class="urlFile">html</span>
<span class="urlPath" title="http://api.jquery.com/appendto"></span>
.appendTo()

Furthermore, when I add in an alert(template) I get:

<span class='urlFile'>html</span>
<span class='urlPath' title=http://api.jquery.com/prependto/>http://api.jquery.com/prependto/</span>

…which is correct. I believe the problem has something to do with the browser rendering the trailing /; however, I am not sure how to fix it other than removing the slash.

FYI: Removing the trailing slash seems to fix the problem, ie:

var url = data.url.replace(/\/$/,'');

… but is it really needed? Sounds like it is a bad idea based on this:

Is it always safe to remove a trailing slash from a URL?

Answer 1

You are right about the trailing slash. The browser thinks that you are closing the second span element. To fix this put the title attribute in quotes like this:

var template = 
"<span class='urlFile'>"+data.contentType+'</span>'+
"<span class='urlPath' title='"+data.url+"'>"+data.url+'</span>';

$(template).prependTo(fieldWrapper);​