无法使用javascript在我的img中设置标题和alt属性

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

为了响应您的上一次编辑：如果您只是想存储与图像关联的数据以供以后使用，则可以使用jQuery的data方法。