How to set HTML lang attribute dynamically?

Question

How to set HTML 'lang' attribute dynamically in a web application?

I tried using jQuery as follows to insert the 'lang' attribute:

$(document).ready(function() {
     $("html").attr("lang", language); //'language' value is retrieved from a cookie
});

Using console/alert, 'lang' attribute looks to be set as expected. But if you see generated source (View Source), 'lang' isn't getting set at all.

Requirement is Screen Readers must be able to recognize the language dynamically. It would be great if there is any other solution to make Screen Readers recognize the language dynamically. Thanks everyone for the comments inline!

Yes it is...you can check it: $("html").attr("lang", language); alert($("html").attr("lang")): — Hackerman
– Hackerman, Commented Feb 3, 2016 at 21:12
Pure js way: document.documentElement.setAttribute('lang','test');alert(document.documentElement.getAttribute('lang')); — Hackerman
– Hackerman, Commented Feb 3, 2016 at 21:15
If you see the DOM structure (using 'view source'), 'lang' isn't getting injected. — Xplora
– Xplora, Commented Feb 3, 2016 at 21:15
@Xplora...that is not how it is supposed to work...remember that your are changing the DOM programmatically...when you see the source via View Source, you see the original html structure :) — Hackerman
– Hackerman, Commented Feb 3, 2016 at 21:19
Use Google Chrome's Inspect feature instead and you'll see it — phenxd
– phenxd, Commented Feb 3, 2016 at 21:21

ShortFuse · Accepted Answer · 2020-05-06 14:32:37Z

46

document.documentElement.setAttribute('lang', navigator.language);

or

document.documentElement.lang = navigator.language;

answered May 6, 2020 at 14:32

ShortFuse

6,9623 gold badges41 silver badges40 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Quentin · Accepted Answer · 2016-02-03 21:26:57Z

12

But if you see generated source (View Source), 'lang' isn't getting set at all.

View Source doesn't show you the generated source. It shows you the real source. If you want to change it, then you need to change it on the server before you deliver it to the browser. You can't modify it with client side JavaScript.

Your DOM changes will show up in the live DOM, which will be visible through Inspect Element.

answered Feb 3, 2016 at 21:26

Quentin

949k136 gold badges1.3k silver badges1.4k bronze badges

Comments

phenxd · Accepted Answer · 2016-02-03 21:12:12Z

2

Can't comment yet.

I tried the snippet and it worked for me. Of course I added a string value instead of your 'language' variable.

Don't forget to import jQuery in the top menu in order for it to work in the snippet.

answered Feb 3, 2016 at 21:12

phenxd

6894 silver badges17 bronze badges

Collectives™ on Stack Overflow

How to set HTML lang attribute dynamically?

3 Answers 3

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related