Cannot set title and alt attributes in my img using javascript

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

I suspect the problem lies elsewhere. Consider this example, which works fine in the browsers I've tested (Firefox, Chrome, IE):

var link = document.createElement("a");
link.href = "http://stackoverflow.com";

var img = document.createElement("img");
img.title="Hello";
img.alt="alt Hello";
img.src="http://jsfiddle.net/img/sprites.png";
link.appendChild(img);
document.body.appendChild(link);

alert(img.getAttribute("alt"));
alert(img.getAttribute("title"));

I would recommend checking to see if anything might be in front of the link/img element, as this would stop a tooltip from appearing on hover.

Answer 2

Try:

img.setAttribute('title', 'someTitle');

Appearantly, there's a difference between 'properties' and 'attributes' in DOM scripting.

Answer 3

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.