jquery use variable in string for appendTo

Question

How can I append this URL variable to the list?

I am fiddling around with this: http://jsfiddle.net/Y2ER7/4/

JS:

$(function() {
    var pic = "http://jqueryui.com/demos/droppable/images/high_tatras3_min.jpg";

    // doesn't work
    $("<li><img /></li>").attr("src", pic).appendTo("#album ul");
    $("<li><img src='pic' /></li>").appendTo("#album ul");

    // hardcoded works
    $("<li><img src='http://jqueryui.com/demos/droppable/images/high_tatras3_min.jpg' /></li>").appendTo("#album ul");
});

HTML:

<div id="album">
    <ul>
        <li>red</li>
        <li>green</li>
        <li>blue</li>
    </ul>
</div>

Answer 1

You want to set the src on the <img> so do that then .wrap() it in a <li></li>, like this:

$("<img />").attr("src", pic).wrap("<li />").parent().appendTo("#album ul");

You can test it out here, make sure to use .parent() to get the <li> you wrapped it in.

Answer 2

You could do something like this: http://jsfiddle.net/Y2ER7/6/

$("<li />", {html:"<img src='" + pic + "' />"}).appendTo("#album ul");

Creates a new <li> element, with its HTML content set as the <img> with pic concatenated in for the src attribute.

---

EDIT: As described in the comments from @Nick Craver below, if you're unsure of the source of your pic variable, you should not concatenate the src attribute as in this answer.

If you're using a string as in your question, there shouldn't be an issue.