Pulling images from an html page in jQuery

Question

I was given a task to pull images from an html page using only jQuery and nothing else.

The html page is a page with a lot of tables and a lot of different png's. In about 400 lines of html, there are about 80 images. My job is to get all of the images with a certain domain to the bottom of the page (the div class="code"> section), so I can then manually go through them to save them.

So far I am able to get the src of all of the images, but I am not sure how to get all of the actual images. I was thinking if I was to save the source in a variable, I could just redirect the each loop to an img tag and feed it the image source. So far it just returns a broken img link, so I think I have the right idea, but not the right code.

Here is my js

$(document).ready(function(){
            $("img[src*='tieks']").each(function() {  // src* so I only get certain images
               imgsrc = this.src;
               $(".code").append(imgsrc);
            }); 
   });

This is the code section

<div class="code">
    <img src=imgsrc>
</div>

Does anyone know how I could tackle this?

Not clear. Your HTML has just a single image. Where are pulling them from and where do you need to place them? — PM 77-1, Oct 24 '14 at 00:23
when you say save them, can log a list to the browser console if that helps. Not sure what `save` means. Or you can loop through them and make an ajax request to server for each one. In the past I've even created sql `insert` statements in the console. Then copied those statements right into a database tool and have them inserted in a db in next to no time — charlietfl, Oct 24 '14 at 00:35

score 1 · Answer 1 · edited May 23 '17 at 12:20

1

The trick is to create a new element and append it to your div or whatever you prefer.

var img = $('<img id="dynamic">'); //Equivalent: $(document.createElement('img'))
img.attr('src', responseObject.imgurl);
img.appendTo('#imagediv');

This is also answered in this thread from where the example above origins: How to create a new img tag with JQuery, with the src and id from a JavaScript object?

edited May 23 '17 at 12:20

Community

1
1

answered Oct 24 '14 at 00:21

L.H

325
1
7

Probably better to change the id for each image instead of using `dynamic` for all of them. – artm Oct 24 '14 at 00:27

score 1 · Accepted Answer · answered Oct 24 '14 at 00:30

1

If all you want is to clone all the images into one container:

$('.code').append( $("img[src*='tieks']").clone() );

clone() API Docs

answered Oct 24 '14 at 00:30

charlietfl

170,828
13
121
150

score 1 · Answer 3 · answered Oct 24 '14 at 01:03

you are trying coding is correct.you are taken only image source.If u want to take all the original images and append to div with class 'code',you will try to change

$("img[src*='tieks']").each(function() {

    $(".code").append(this);

});

just try it.

Pulling images from an html page in jQuery

3 Answers3