Add an image to a div using jquery

Question

I have a sticky menu/floater bar when a user scrolls down on the page ... using jQuery I add the floater-bar class to the #menu-wrapper.

My goal is to add an image within an anchor at the same time floater-bar class is added so that the logo is on the floater bar as well.

if ($(window).scrollTop() > $header_top_pos) {
  $("#menu-wrapper").addClass("floater-bar");
} else {
  $("#menu-wrapper").removeClass("floater-bar");
}

I have tried the following:

$("#menu-wrapper").append("<a href="#"><img src="image" /></a>");

Tried .add and .prepend as well

It makes the whole script fail as the floater-bar class no longer gets added into the menu.

Quotes are interrupting your append statement. Use single quotes within a double quoted string or escape the double quotes with \". — Joel Etherton
– Joel Etherton, Commented Mar 13, 2014 at 14:42

Albzi · Accepted Answer · 2014-03-13 14:41:40Z

5

Do this instead:

$("#menu-wrapper").append("<a href='#'><img src='image' /></a>");

You're using " to start and end the append, but then using it also to assign a href and the src, which is canceling out the string.

So only use " to start and end it, and if you need quotes inside, use ', or escape the double quotes by using \".

If you wanted to do string concatenation (although not what you asked for, could come in handy later on), you do something like this:

$("#menu-wrapper").append("<a href='"+url+"'><img src='"+image+"' /></a>");

image and url would be variables. + is used to concatenate the string, giving you access to use variables within the string.

answered Mar 13, 2014 at 14:41

Albzi

15.6k6 gold badges49 silver badges67 bronze badges

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

3 Comments

Huangism Over a year ago

alternatively, you could escape the double quotes \" if you are a huge fan of the double quote

Albzi Over a year ago

Just said that as you commented! Thanks @Huangism

jriley88 Over a year ago

Thank you guys for such quick response. I ended up having to escape the double quotes, the script itself is being called by a php variable therefore would break when i used single quote.

A J · Accepted Answer · 2014-03-13 14:44:47Z

2

try this

var anchor = $("a").attr("href","#");
var img = $("img").attr("src","img_source");
anchor.append(img);
$("#menu-wrapper").append(anchor);

answered Mar 13, 2014 at 14:44

A J

2,14015 silver badges24 bronze badges

Collectives™ on Stack Overflow

Add an image to a div using jquery

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related