如何为HTML标签添加lang=en属性？现有代码存在内容替换问题

我想给页面的<html>标签加上lang="en"属性，但之前写的代码要么直接替换掉整个HTML标签，导致页面内容全丢了；要么拼接内容的写法也没能正常工作。

之前用的错误代码示例1： #

window.addEventListener('load', function () {
    alert("It's loaded!")
    const cond = document.getElementsByTagName('html')[0]|| false;
    console.log(cond)
     if (cond) {
          $('html').each(function() {
              $(this).replaceWith($('<html lang="en">'));
          });
    }});

错误代码示例2： #

const htmlContent = $( "html" ).html();
    if (cond) {
        $('html').replaceWith('<html lang="en">' + htmlContent +  '</html>');
    }

正确解决方法 #

根本不需要替换整个<html>标签，直接给元素设置属性就完事了，两种写法任选：

方法1：原生JavaScript写法 #

window.addEventListener('load', function () {
    const htmlEle = document.querySelector('html');
    // 只有当html标签还没lang属性时才添加
    if (htmlEle && !htmlEle.hasAttribute('lang')) {
        htmlEle.setAttribute('lang', 'en');
    }
});

方法2：jQuery写法 #

$(window).on('load', function() {
    const $html = $('html');
    if (!$html.attr('lang')) {
        $html.attr('lang', 'en');
    }
});

为啥之前的代码不行？ #

• 第一段代码直接把原html标签替换成了空的<html lang="en">，页面内容自然全没了；
• 第二段代码拼接内容的方式容易破坏原DOM结构和已绑定的事件，完全没必要这么折腾，直接设置属性才是最高效稳妥的方式。

内容的提问来源于stack exchange，提问作者shanky