How to append image using jQuery .append()?

Question

I could append a string to my table to show the status as such

$('#test').empty().append("on")

but it would be better if i can display an image instead of a string. i tried this:

$('#test').empty().append(<img src="/static/on.png" height="64px" width="64px">)

but it's not working. How should i do it?

The entire <img /> tag needs to be in quotes. $.append('<img src="..." />') — matthewpavkov
– matthewpavkov, Commented May 8, 2013 at 3:05

PSL · Accepted Answer · 2013-05-08 03:08:36Z

11

Missing quotes:

$('#test').empty().append('<img src="/static/on.png" height="64px" width="64px">');

Since you are emptying and appending item. you could do this instead. .html will replace the whole content of your selector with image item. Later on if you want to append to this div you can do .append(...);

$('#test').html('<img src="/static/on.png" height="64px" width="64px">');

If you are planning to empty and append image then .html() is the best approach for you.

See Ref for .html()

edited May 8, 2013 at 3:08

answered May 8, 2013 at 3:05

PSL

124k21 gold badges257 silver badges243 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Ry- Over a year ago

It would still need quotes. And the $ sign. :)

yvonnezoe Over a year ago

@PSL could you help me take a look at this question as well? :) stackoverflow.com/questions/16411085/…

Arun P Johny · Accepted Answer · 2013-05-08 03:14:44Z

8

Try

$('<img />', {
    src: 'test.png',
    width: '200px',
    height: '100px'
}).appendTo($('#empty').empty())

answered May 8, 2013 at 3:14

Arun P Johny

389k68 gold badges532 silver badges532 bronze badges

3 Comments

yvonnezoe Over a year ago

Thanks again Arun! Could you help me take a look at this problem here too? stackoverflow.com/questions/16411085/… :)

Ol Sen Over a year ago

with this code, img becomes style="width:200px; height:100px" attribute

omarojo Over a year ago

I need to add style background-image but it doesnt get inside the style parameter.

$('<li />', {       background-image: 'url("'+tweet.photoUrl+'")',       width: '134px',       height: '134px' }).appendTo($('.tweets'));

Wont understand background-image

Elliot Bonneville · Accepted Answer · 2013-05-08 03:05:09Z

3

You need to surround the HTML to be appended with quotes:

$('#test').empty().append('<img src="/static/on.png" height="64px" width="64px">');

I used single quotes here because you already have double quotes in the HTML, so they would escape the string if you used doubles to surround it.

answered May 8, 2013 at 3:05

Elliot Bonneville

53.6k23 gold badges101 silver badges125 bronze badges

Collectives™ on Stack Overflow

How to append image using jQuery .append()?

3 Answers 3

2 Comments

3 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related