用javascript更改文本并保留src

Change text with javascript and keep src

本文关键字：保留 src 文本 javascript      更新时间：2024-01-16

如果这是一个愚蠢的问题，很抱歉！

我正在使用一个脚本来翻译我的页面，代码是：

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

如何解决这个问题？

请参阅以下关于img标签内内容的答案：img标签内的div标签

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

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

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

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

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

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

<img>标记不允许包含任何信息，它是一个"空元素"

如果在其中添加任何文本，则该文本将变为无效的HTML文本。

您可以添加一个alt属性：

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

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

JQuery在渲染后立即搜索dom元素，并用其相应的值

替换键

不可能将文本添加到图像标记中，而是将span元素直接放在图像后面并访问该元素。

<img src="img/fav-rond.png" /><span id="textimg">English text</span>
相关文章：