使用 javascript 更改文本并保留 src答案

【问题标题】：Change text with javascript and keep src使用 javascript 更改文本并保留 src
【发布时间】：2016-04-06 09:21:18
【问题描述】：

对不起，如果这是一个菜鸟问题！

我正在使用脚本来翻译我的页面，其中包含以下代码：

<script>
        var translations= { 'en' : 
                                {'title' : 'Title', 'textimg' : 'English text'},
                            'fr' : 
                                {'title' : 'Titre', 'textimg' : 'Texte français'}
                          };
        function doTranslate(language) {
            for(id in translations[language]) {
                document.getElementById(id).innerHTML = translations[language][id];
            }
        }
</script>

还有这个html：

<a href="javascript:doTranslate('fr')"><img src="img/Fr-Flag.png"></a>
<a  href="javascript:doTranslate('en')"><img src="img/UK-Flag.png"></a>
<h2 id="title">Title</h2>

当我使用图片（小图标）时出现问题：文字改变了，但src似乎消失了，所以当文字改变时，图像不显示：

<img id="textimg" src="img/fav-rond.png">English text</img>

如何解决这个问题？

【问题讨论】：

您的预期输出是什么？ English [x] 之类的东西，其中English 是一些任意翻译的文本，[x] 是标志图像？
我想在修改后的文字旁边放一张图片，像这样：image英文文本->imageTexte français
哪些文本正在更改，您传递的是哪个 id？
也许你应该提供一个更完整的当前实现的 HTML，现在看起来有点模棱两可。

标签： javascript html src

【解决方案1】：

请查看有关img 标签内内容的答案：Div tag within img tag

但一种可能的解决方案是从img 中删除id，并在具有该ID 的文本周围创建一个新元素。例如：

<img src="img/fav-rond.png" />
<span id="textimg">English text</span>

还有一个演示：https://jsfiddle.net/7j2ckw0r/1/

【讨论】：

这个我试过了，但是图片不在文字旁边
写成span 或者使用一点CSS

【解决方案2】：

这应该可以解决您的问题。

document.getElementById(id).setAttribute("id", translations[language][id])

您不应该使用 innerHTML 来解决这个问题。

【讨论】：

@SGS Venkatesh 您的解决方案帮助我解决了另一个问题（href）！ ;)

【解决方案3】：

<img> 标签不允许包含任何信息，它是"Empty element"

如果您在其中添加任何文本，这将成为无效的 HTML 文本。

您可以添加一个alt 属性：

<img id="textimg" src="img/fav-rond.png" alt="English text"/>

【讨论】：

【解决方案4】：

我强烈建议您访问此链接，您会找到用纯 JavaScript 代码翻译 html 页面的最佳方式。

JQuery search dom elements just after rendering and replace keys by its corresponding values

【讨论】：

【解决方案5】：

无法将文本添加到图像标签，而是直接在图像之后放置 span 元素并访问它。

<img src="img/fav-rond.png" /><span id="textimg">English text</span>

【讨论】：