Question

I’m using the Google Image Search API, and largely copied this code, which builds the search results in my page.

for (var i = 0; i < results.length; i++) {
    // For each result write it's title and image to the screen
    var result = results[i];
    var linkContainer = document.createElement('div');

    var title = document.createElement('div');
    // We use titleNoFormatting so that no HTML tags are left in the title
    title.innerHTML = result.titleNoFormatting;

    var newImg = document.createElement('img');

    newImg.src = result.tbUrl;
    newImg.className = 'googleSearchResult';
    newImg.title = 'newTitle';
    newImg.alt = 'newAlt';

    var newLink = document.createElement('a');
    newLink.href = "temp_url";              

    newLink.appendChild(newImg);
    contentDiv.appendChild(newLink);
}

In the following lines,

newImg.src = result.tbUrl;
newImg.className = 'googleSearchResult';
newImg.title = 'newTitle';
newImg.alt = 'newAlt';

the first two, which set the image src and class, work fine, but the second two, which should set the title and alt of the image, don’t work at all. Can anyone see why this would be happening? Thanks for reading.

EDIT:
Here is the HTML when inspected in Firefox through Firebug:

<img alt="" src="http://images.google.com/images?q=tbn:_HZix2CrLSLSOM::bestonlinetvseries.com/deadwood/deadwood_s01.jpg" class="googleSearchResult">

Here is the HTML when inspected in Google Chrome

<img alt src="http://images.google.com/images?q=tbn:_HZix2CrLSLSOM::bestonlinetvseries.com/deadwood/deadwood_s01.jpg" class="googleSearchResult">

EDIT:
What I am trying to do here is store an extra bit of data in the HTML for the image, to be used in a jQuery plugin later. If anyone can suggest an alternative way to do this, that would be great as well.

Answer 1

In response to your last edit: if you’re just trying to store data associated with an image for later use you could use jQuery’s data method.