Question

我正在使用Google图片搜索API，并在很大程度上复制了此代码，该代码会在我的页面中构建搜索结果。

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);
}

在以下几行中，

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

前两个设置图像src和类，工作正常，但后两个，应该设置图像的标题和alt，根本不起作用。谁能明白为什么会发生这种情况？谢谢你的阅读。

编辑：这是通过Firebug在Firefox中检查时的HTML：

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

以下是在Google Chrome中检查时的HTML

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

编辑：我在这里要做的是在图像的HTML中存储一些额外的数据，以便稍后在jQuery插件中使用。如果有人可以建议另一种方法来做到这一点，那也会很棒。

Answer 1

我怀疑问题出在其他地方。考虑this example，它在我测试的浏览器（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"));

我建议检查链接/ img元素前面是否有任何内容，因为这会阻止工具提示在悬停时显示。

Answer 2

尝试：

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

很明显，DOM脚本中的'properties'和'attributes'之间存在差异。

Answer 3

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

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

3 个答案: