Question

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="" 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?

Answer 1

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
  })
);