Not getting tags html in page source

Question

I have multilingual single page html application where I set html of tags by calling function on document.ready . However I am not getting html of any tag in page source when I view page on View Page Source . How can I get the tags in page source? document.ready is in the last script tag of the page.

$(document).ready(function() {
    var lang = // get the language.
    translateFunction(lang);
});

Below function is in js file. This file is added above the last script tag (ie document.ready script).

function translateFunction(lang) {
    $("[tkey]").each(function (index)
    {
        var strTr = lang_resource[lang][$(this).attr('tkey')];
        $(this).html(strTr);
    });
}

<h1 tkey="firstH1"></h1>

Language wise data is in json format in the same js file with translate function.

When I view the page source, I see only

<h1 tkey="firstH1"></h1>

Where it needs to be like below,

<h1 tkey="firstH1">Anything from the translate function.</h1>

On the page, you can see the desired output, but in the page source, I am not getting html set. What I want to do is, I want set html of the tags in javascript on document.ready. How to do it?

EDIT We want to add meta tags. And set keywords and description language wise. This is the main concern. The keywords and description are set in translate function. Will the crawler take the keywords and description?

We have two links language wise in site map. So when user select say french language, it will redirect to www.mysite.com?lang=fr and all the tags are set in french language. So the meta keywords and description.

Answer 1

Firstly if this is the exact code,

$(document).ready(function() {
    var lang = // get the language.
    translateFunction(lang);
});

there is error in itself...

there should be some value for var lang