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>

Nick Craver · Accepted Answer · 2010-09-28T17:32:27.470

9

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.

edited Sep 28 '10 at 17:32

answered Sep 28 '10 at 17:22

Nick Craver

623,446
136
1,297
1,155

That's great, thanks Nick. Any idea why I loose CSS formatting on my thumbs here: http://jsfiddle.net/Y2ER7/4/ – FFish Sep 28 '10 at 17:28
@FFish - My fault, you need a `.parent()` in there to get the `
`, `.wrap()` returns the `` otherwise, here's your fiddle updated: http://jsfiddle.net/Y2ER7/5/

Nick Craver

Sep 28 '10 at 17:33

Nick = SuperHero. I found a sollution yself though. just addClass with the style for the thumbs. Cheers. – FFish Sep 28 '10 at 17:35

2

@FFish - Make sure to use `.parent()`!, without it you're appending a `` to a `

`.

– Nick Craver Sep 28 '10 at 17:36

user113716 · Answer 2 · 2010-09-28T18:22:47.477

0

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.

edited Sep 28 '10 at 18:22

answered Sep 28 '10 at 17:24

user113716

318,772
63
451
440

....why would you create one element with DOM methods, then another as a string inside it? – Nick Craver Sep 28 '10 at 17:26
@Nick - Lack of experience? :o) I figured there must be some reason why jQuery made the `html:` option available, but perhaps it is better to not use it? – user113716 Sep 28 '10 at 17:28
@patrick - Just be aware of the dangers, e.g. `pic` having a quote in it, XSS attach, etc, better to create one way or another, and DOM is always the safer route :) – Nick Craver Sep 28 '10 at 17:29
@Nick - Wouldn't the XSS issue be resolved since jQuery is (presumably) calling `.html()` to set the HTML content? – user113716 Sep 28 '10 at 17:30
@patrick - Nope, that's exactly the issue, blindly doing `.innerHTML` :) `.text()`, etc encodes, as will an attribute, it'll take care of many attacks. – Nick Craver Sep 28 '10 at 17:36
@Nick - I see. I had thought that the point of using `.html()` was that it did something to protect against XSS. With regard to a quotation mark in `pic`, I can't find any way to produce an issue. Was there something specific you had in mind? – user113716 Sep 28 '10 at 18:06
I think you're better off sticking with DOM vs using html, it's bother safer and more efficient. I wouldn't use html unless there wasn't an alternative (which in this case there clearly is). – sage88 Apr 24 '13 at 05:42

jquery use variable in string for appendTo

2 Answers2