在聊天中更改从 javascript 动态创建的图像的标题答案

【问题标题】：Change title of image that's dynamically created from javascript in a chat在聊天中更改从 javascript 动态创建的图像的标题
【发布时间】：2019-09-04 16:59:02
【问题描述】：

目标：我正在尝试为 img 设置 alt 和标题。

问题：问题是，它是在用户上传图片时在聊天中动态创建的。图片没有id。

我尝试了什么：我尝试将其添加到 innerhtml，但是当我尝试为图像设置标题时没有任何反应（它显示的是英文文本，而不是西班牙文）。我知道条件是正确的，因为我已经在同一个 if 语句中翻译了其他静态项目。但是这个 img 是动态创建的。我看到一些提到 jquery 的 SO 文章。但是也有人说不需要，可以通过纯JS来实现。

if(locale=='es'){
    openLargerImageMsg = 'Haga clic para abrir una imagen más grande'; //Text I want to display
    document.getElementById('largerImageID').title = openLargerImageMsg;
    document.getElementById('largerImageID').alt = openLargerImageMsg;      
}

var newMsgImg = document.createElement('img');
var newMsgContent = document.createElement('div');

newMsgContent.innerHTML = '<img id="largerImageID" src="/ImgUploads/' + message.UploadedFileName + '" onclick="ShowLargerUploadedFile(\'/ImgUploads/' + message.UploadedFileName + '\');" alt="Click to open larger image" title="Click to open larger image" /><span class="ChatMessageTimestamp">' + message.Timestamp + '</span>';

newMsg.appendChild(newMsgContent);
appendMessage(newMsg);


var appendMessage = function (objMsg) 
        {
            objLiveChatLog.appendChild(objMsg);
        };

【问题讨论】：

标签： javascript html innerhtml alt

【解决方案1】：

我认为问题在于您在创建元素之前使用了getElementById 函数。

我写了一些测试，这应该可以工作。

// Fake locale change
locale = `es`;

const genImg = () => {
        
        const newImg = document.createElement(`img`);
        
        newImg.alt = `Click to open a bigger image`;
        
        if (locale == `es`) {
                newImg.alt = `Haga clic para abrir una imagen más grande`;
        }
        
        document.body.appendChild(newImg);
}


document.getElementById(`button`).addEventListener(`click`, genImg);

        &lt;button id="button"&gt;Click&lt;/button&gt;

【讨论】：