inserting images to div using jquery

Question

I like add text and some images to a div using jquery.

I can do this to add text:

<script type="text/javascript">
$(document).ready(function () { 

$("#help").text('This is the description').css({"border": "1px solid", "color": "Black", "font-size": "14px", "font-weight": "bold", "padding": "30px 0 30px 0", "width": "auto", "height": "auto", "text-align": "left", "background": "lightyellow"});

I tried this:

$("#help").append('<img src="description.png" alt="box_plot_description" />'); 

});

How would append image to this text using jquery?

I have added the append after text but, append is overwriting the div. I like have text at the beginning of the div and after that an image.

see @Shyju's answer. You need to use .html() instead of .text() — i--
– i--, Commented Aug 9, 2012 at 13:46

Shyju · Accepted Answer · 2012-08-09 13:51:19Z

5

use html() method

$("#help").html('<img src="somesrc.jpg" alt="someimage" />');

Working sample : http://jsfiddle.net/HdFqr/3/

If you want to keep the existing content and append the image, use append method

$("#help").text("Some Text");
$("#help").append('<img src="somesrc.jpg" alt="someimage" />');

Sample : http://jsfiddle.net/HdFqr/4/

You can also use appendTo method as well

var img=$("<img />").attr("src","someimag.jpg");
img.appendTo($("#help"));

Sample : http://jsfiddle.net/HdFqr/6/

edited Aug 9, 2012 at 13:51

answered Aug 9, 2012 at 13:45

Shyju

220k106 gold badges421 silver badges499 bronze badges

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

1 Comment

user1471980 Over a year ago

Thank you for your response. This overwrites my div, I like to append to my div. Basically, I look to put some description in text and then add an image.

netdigger · Accepted Answer · 2012-08-09 13:46:47Z

2

If you want to append:

$('#divid').append('<img src="path" />');

If you just want to set a specific image:

$('#divid').html('<img src="path" />');

answered Aug 9, 2012 at 13:46

netdigger

3,7993 gold badges30 silver badges51 bronze badges

2 Comments

user1471980 Over a year ago

Everlof, I have update the code. When I do append after text, it overrites my div. I dont see the text in the div anymore.

netdigger Over a year ago

Well, it depends how do you want it to look? This example uses p tags for the text jsfiddle.net/HdFqr/10

user723438 · Accepted Answer · 2012-08-09 14:18:00Z

1

You can insert an image with .html()

$("#help").html('<img src="description.png" alt="box_plot_description" />');

answered Aug 9, 2012 at 14:18

user723438

Collectives™ on Stack Overflow

inserting images to div using jquery

3 Answers 3

1 Comment

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related