Jquery multi-line text problem

I have a div with text inside:

<div>A description of dreamstill. It is a music site that is social and other stuff where you cando this and that and pretty much anything that your heart allows. This is probably as long as the description will get.</div>

Then I extract the text and stick it as a data-url attribute on an image:

var desc = div.text();
div.replaceWith('<img class="center" src='+url+' data-desc=' + desc + ' />');

The problem is that the image is being generating like this:

<img class="center" src="http://featherfiles.aviary.com/2011-09-09/aae3b22a952841cd9c0d6a26a5867325.png" data-desc="A" description开发者_StackOverflow="" of="" dreamstill.="" it="" is="" a="" music="" site="" that="" social="" and="" other="" stuff="" where="" you="" cando="" this="" pretty="" much="" anything="" your="" heart="" allows.="" probably="" as="" long="" the="" will="" get.="">

What am I doing wrong here?

The issue is that you are missing quotes around the value in the tag, but you can't just add quotes because that will still break if the description text has quotes in it.

Instead, try this.

var desc = div.text();
div.replaceWith(
  $('<img />', {
    "class": "center",
    "src": url,
    "data-desc": desc
  })
);

The other answers are correct, in that you're missing quotes, but the next problem you'll have will be when a description contains a quote and it breaks the HTML. My recommendation is to append the image, then set the data-desc.

div.replaceWith(
  $('<img class="center" src="' + url + '"/>').attr('data-desc', desc)
);

div.replaceWith('<img class="center" src="'+url+'" data-desc="' + desc + '" />');

forgot the " on either side of the desc

You missing quotes. All attributes values should be in " quotes

div.replaceWith('<img class="center" src='+url+' data-desc="' + desc + '" />');

and for url to

src="'+url+'"

from w3c Attribute values should always be enclosed in quotes http://www.w3schools.com/html/html_attributes.asp

live demo: http://jsfiddle.net/pzC7b/8/

This will replace quotes with character entity

desc.replace(/\"/g, '"')

Result + encode url:

div.replaceWith('<img class="center" src="' + encodeURI(url) + '" data-desc="' + desc.replace(/\"/g, '&quot;') + '" />');

Example on jsfiddle