Dom string doesn't change after manipulation with jQuery attr

Question

I'm making a js-based epub reader as a weekend project and I'm trying to change the src attribute of the images on each of the book's pages from image urls to data URI's loaded from the epub zip. Here's my function:

//page contents is just an html string of the book's page
pageContents = GlobalZipLoader.load('epub.zip://' + pageLocation);
pageContents = replaceImages(pageContents)

...

function replaceImages(pageContents){
  $(pageContents).find('img').each(function(){
    var domImage = $(this);

    //this is something like ".../Images/img.jpg"
    var imageLocation = domImage.attr('src'); 

    //this returns the proper data-uri representation of the image
    var dataUri = GlobalZipLoader.loadImage('epub.zip://' + imageLocation);

    //this doesn't seem to "stick"
    domImage.attr('src', dataUri);
  });
  return pageContents;
}

The returned pageContents from the replaceImages functions still has the old src attributes. I can provide more detail if needed but any help would be very much appreciated.

Correct answer thanks to The System Restart and Ilia G:

function replaceImages(pageContents) {
    newContent = $(pageContent);
    ... manip ...
    return newContent;
}

Answer 1

you should try to change the image src after image load complete;

and I think this is happening with in loadImage function.

According to your update question:

You don't need any clone(), I think. Just store pageContents in a tempContents variable and use that variable