Multilanguage. Записать HTML тэг в объект

Делаю сайт с возможностью перевода на несколько языков. Переводы делаю таким образом

$(function() { 
  $('.translate').click(function() { 
    var lang = $(this).attr('id'); 
 
    $('.lang').each(function(index, element) { 
      $(this).text(arrLang[lang][$(this).attr('key')]); 
    }); 
  }); 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<script> 
  var arrLang = { 
  'ru': { 
    'title': 'Some text ru', 
    'subtitle': 'Some text ru ru' 
   
  }, 
  'ua': { 
    'title': 'some text ua', 
    'subtitle': 'some text ua' 
  } 
   
  }; 
</script> 
<h1 key="title" class="lang">Some text</h1> 
<h2 key="subtitle" class="lang">Some text double</h2> 
 
 
<button class="translate" id="ru">RU</button> 
<button class="translate" id="ua">UA</button>

Но есть проблема: она заключается в том, что если есть вложенность например такая - <li> bla bla <span>some text</span> continue</li>, то непонятно как переводить части перед спаном и после него. Либо же весь текст до спана и после спана оборачивать в какой-то тег и давать ему ключ.

Собственно вопрос: возможно ли как-то в объект записывать тег вида: Some text <span>400</span> и чтоб он в переведенном виде отображался корректно? Для этого нужно его как-то обрабатывать, но вот как... или может есть другое решение мультиязычности?

Заранее благодарен.

UPD. В MVC есть такая штука как @Html.Raw, тогда можно в файлы ресурсов записывать вложенные теги и вообще HTML. Вот если бы был какой-то аналог этого трюка в jQuery, было бы прекрасно