Adding some HTML to a div with jQuery

Question

I have this HTML

<div class="picture"></div>

and depending on the viewport width, I'd like to add either a small or a large image to the div, so that it will look like this:

<div class="picture"><img src="small.jpg></div>

Here's some jQuery I found somewhere on the web which seems to do exactly what I want. The only part where I'm stuck now is the img src="....jpg" thing. How can I translate this into jQuery?

jQuery(document).ready(function() {
    $(window).resize(function() {
        var window_width = $(document).width();
        if (window_width <= 1024) {

            img src = "small.jpg"

        } else {

            img src = "large.jpg"

        }
    });
});

Thanks!

Is The <img> tag is already present you just want to chage the source? — Varun
– Varun, Commented Jun 23, 2015 at 18:25
Just check my answer below, i have answered for both cases to be safe @Groen91 — Varun
– Varun, Commented Jun 23, 2015 at 18:31

Varun · Accepted Answer · 2015-06-23 18:52:36Z

2

If you are creating a <img>

$(window).resize(function() {
    var window_width = $(document).width();
    if (window_width <= 1024) {
        $(".picture").html("<img src='small.jpg'>");
    } else {
        $(".picture").html("<img src='large.jpg'>");
    }
});

or if you just want to assign a source,

$(window).resize(function() {
    var window_width = $(document).width();
    if (window_width <= 1024) {
        $(".picture").find("img").attr("src", "small.jpg");
    } else {
        $(".picture").find("img").attr("src", "large.jpg");
    }
});

edited Jun 23, 2015 at 18:52

answered Jun 23, 2015 at 18:29

Varun

1,9562 gold badges12 silver badges17 bronze badges

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

5 Comments

Groen91 Over a year ago

Thanks, I think the first one is what I'm looking for. Will test it now and report :)

Groen91 Over a year ago

Ok, this works fine, thanks again! The only strange thing now is when I load the page, both images don't show up, only when I change my browser size. Is there a simple way to fix it, so that they show up on default?

Varun Over a year ago

@Groen91 You want both the images on load or any specific one?

Groen91 Over a year ago

Yes, the specific one, not both.

Varun Over a year ago

@Groen91 I guess it would be the same code,but in $(document).ready() ,better put it inside a function and call it on load as well as on scroll.

Satpal · Accepted Answer · 2015-06-23 18:36:46Z

2

You can check if div has img element updated its src else create new img element and append it.

jQuery(document).ready(function() {
    $(window).resize(function() {
        var window_width = $(document).width();
        var imgsrc = "large.jpg"
        if (window_width <= 1024) {
            imgsrc = "small.jpg"
        }
        //Picture element
        var picture = $('.picture');

        //Picture has img element update its src else append new img tag
        if (picture.find('img').length) {
            picture.find('img').attr('src', imgsrc );
        } else {
            picture.append('<img src="' + imgsrc + '" />')
        }
    });
});

edited Jun 23, 2015 at 18:36

answered Jun 23, 2015 at 18:31

Satpal

134k13 gold badges168 silver badges171 bronze badges

Comments

taxicala · Accepted Answer · 2015-06-23 18:29:41Z

1

Try this code snippet:

jQuery(document).ready(function () {
    $(window).resize(function () {
        var window_width = $(document).width();
        var src = (window_width <= 1024) ? "small.jpg" : "large.jpg";
        $('.image').remove(); //Remove in order to avoid multiple images to be added.
        $('.picture').prepend($('<img />', {src: src, class: 'image'}));
    });
});

answered Jun 23, 2015 at 18:29

taxicala

21.8k7 gold badges41 silver badges67 bronze badges

Comments

Alexandre · Accepted Answer · 2015-06-23 18:27:04Z

0

Like this :

$('.picture').find('img').attr('src','small.jpg');

answered Jun 23, 2015 at 18:27

Alexandre

2,0501 gold badge15 silver badges23 bronze badges

Comments

Community · Accepted Answer · 2017-05-23 11:58:30Z

0

You'll need to update the attributes.

In jQuery, you'll do something like this to update the src:

$('<img>') // create a new img node
  .attr('src', 'newsrc')  // set the src to your desired source
  .load(function(){
     this.appendTo('.picture');  // once the source has finished loading, append it to the <div>
   });

For more information on this, check out this other Stack Overflow post:

Changing the image source using jQuery

edited May 23, 2017 at 11:58

CommunityBot

11 silver badge

answered Jun 23, 2015 at 18:27

Danny Delott

7,0284 gold badges38 silver badges60 bronze badges

1 Comment

Sushil Over a year ago

there is no <img> tag. he needs to add it to the div dynamically

Travis J · Accepted Answer · 2015-06-23 18:33:13Z

Cache both images up front in jQuery objects constructed with image elements pointing to their source.

Then, use your conditional statement to store the string for source and reference it to place the cached image element on the page.

jQuery(document).ready(function() {
    //cache images
    var imgSet = {
        "small.jpg" : $('<img src="small.jpg" />'),
        "large.jpg" : $('<img src="large.jpg" />')
    };
    $(window).resize(function() {
        var window_width = $(document).width();
        var imgsrc;
        if (window_width <= 1024) {
            imgsrc="small.jpg";
        }else {
            imgsrc="large.jpg"
        }
        //use cached image element
        $('.picture').empty().append(imgSet[imgsrc]);
   });
});

meteor · Accepted Answer · 2015-06-23 21:06:27Z

0

In jquery you can use append

$('.picture').append('<img src="small.png"/>');

edited Jun 23, 2015 at 21:06

answered Jun 23, 2015 at 18:27

meteor

2,5784 gold badges40 silver badges59 bronze badges

2 Comments

meteor Over a year ago

Thought it had img tag too! Updated the answer now

Sushil Over a year ago

great. you also need to add single quotes inside append.

Collectives™ on Stack Overflow

Adding some HTML to a div with jQuery

7 Answers 7

5 Comments

Comments

Comments

Comments

1 Comment

Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

7 Answers 7

5 Comments

Comments

Comments

Comments

1 Comment

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related