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?

Answer 1

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()

Answer 2

Try

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

Answer 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.