Html lang attribute does not effect the children of html when lang attribute is changed dynamically

I have a single-page website project, I created it using jQuery and much plain JS. I have different languages on this website. So, for classes such as "texts being uppercase" the html lang attribute need to be set.

When I change the language, I change the lang attribute using:

$("html").attr("lang", "LANGCODE");

This way works fine on Firefox, Edge, Safari and Opera. But it does not works on Chrome. Why should that be?

Edit:

$("[name=lang]").click(function(e) {

  $("html").attr("lang", e.target.value);

});

$("html").attr("lang", "en");  // default

[lang=en] p { color: blue; text-transform: uppercase; }

[lang=tr] p { color: red; text-transform: uppercase; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  
  Set language:
  <input type="radio" name="lang" value="en" checked> English
  <input type="radio" name="lang" value="tr"> Turkish


<p>
Bu bir Türkçe metindir ve Türkçe'de büyük ve küçük olmak üzere hem i hem de ı mevcuttur.
</p>

Should give me:

BU BİR TÜRKÇE METİNDİR VE TÜRKÇE'DE BÜYÜK VE KÜÇÜK OLMAK ÜZERE HEM İ HEM DE I MEVCUTTUR.

Also, my actual code:

// this function is used to get the html code from another page and,
// update the current page partially with the code.
function stringHTMLParse(doc, id, response) {
    // get the element's html code from the page to be loaded.
    var element = $(doc.getElementById(id)).html();

    // if the element exists on the current page, let's change its content
    // with newly obtained content.
    if ($("#"+id).length) {
        $("#"+id).html(element);
        if (id == "zPages") {
            $("#"+id).find("a").click(magicLinks);
        }
    }

    // if we are updating zTop tag, this means that the page title also should
    // be updated.
    if (id == "zTop") {
        document.title = $(doc.getElementsByTagName("title")[0]).first().text();
        var langcode = $(doc.getElementsByTagName("html")[0]).attr("lang");
        $("html").attr("lang", langcode);
        $(doc).find("link[rel='alternate']").each(function(i) {
            $($("link[rel='alternate']")[i]).attr("href", $(this).attr("href"));
        });
    }

    // if we are updating zContent tag, we should run some functions after updating,
    // because when new elements arrive, ultimate Z CSS/JS framework should rerun
    // itself for new classes to be created.
    if (id == "zContent" || id == "zHidden") {
        // zMobVSzWeb function searches for zMob-728="" or zMob-1224="" like custom
        // attributes that are speacial to ultimate Z. this should also need a rerun,
        // because when new elements arrive, they could also have these attributes on them.
        if (window.zAdmin) {
            zTable();
        }
        zAnimate();
        newSystemPre();
        zMobVSzWeb();

        // zDetect function detects "pad-10" or "left-50" like classes and creates them
        // in the head tag, so when we load a new page, we need this function at a rerun.
        // so that the new classes should be created.
        zDetect();
        zTog();
        zRemove();
        zShadow();

        preMagic();
        magic();

        // do we have extra javascript function to be run on the new page?
        // let's run it if we do, but we need to check if we have a function on the page at all.
        var zPageJSS = [];

        for (var x in window) {
            if (typeof window[x] === "function" && x.indexOf("zPageJS") === 0) {
                zPageJSS.push(x);
            }
        }
        zPageJSS.forEach(function(item) {
            window[item]();
        });

        // if we have new links on our new page, lets assign them the magicLinks!
        // so that the proccess repeats itself, and no links should be load on itself.
        if (doc.getElementById("zContent").getElementsByTagName("A").length > 0) {
            $("#zContent").find("a").click(magicLinks);
        }
    }
}