Изменить текст с помощью 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, кажется disapear, поэтому при изменении текста не отображается изображение:

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

Как это решить?

Answer 1

Пожалуйста, смотрите этот ответ о содержании внутри img теги: Div tag within img tag

Но возможное решение заключается в удалении id из img и создать новый элемент вокруг текста с этим идентификатором. Например:

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

И демо: https://jsfiddle.net/7j2ckw0r/1/

Answer 2

Это должно решить вашу проблему.

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

Вы не должны использовать innerHTML для решения этой проблемы.

Answer 3

<img> тег не позволяет какой-либо информации в пределах, это "Empty element"

Если добавить любой текст внутри, что становится недействительным HTML текст ,

Что вы можете сделать, это добавление атрибута alt:

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

Answer 4

Я настоятельно рекомендую вам посетить эту ссылку, вы найдете оптимальный способ для перевода страницы HTML в чистом коде JavaScript.

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

Answer 5

Это не представляется возможным, чтобы добавить текст тега изображения, вместо того, чтобы поместить диапазон элемента непосредственно после того, как изображения и доступа, что вместо.

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