使用 javascript 更改文本并保留 src

Question

抱歉，如果这是一个菜鸟问题！

我正在使用一个脚本来翻译我的网页，代码如下：

<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>

如何解决这个问题？

Answer 1

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

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

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

Answer 2

请参阅有关 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/

Answer 3

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

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

您可以添加一个 alt 属性：

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

Answer 4

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

Answer 5

无法向图片标签添加文本，而是直接在图片后面放置一个 span 元素并访问它。

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

使用 javascript 更改文本并保留 src

Change text with javascript and keep src

html

javascript

src