How do i set the bootstrap .disabled class, using pure JS

i’m just wondering how to set the disabled class on a Navbar link, i don’t want JQuery code just Pure Java script, I’ve tried using .className += “disabled” and the .classList.add( “ disabled”) but none of those seem to work. I know i might sound a little bit crazy, but I was compiling my whole website into one page, with Just JS,CSS, and HTML Here’s my JS:

 function loaded() {         var q = document.getElementById("q");         var title = document.getElementById("title");         var progressbar = document.getElementById("progress-bar")         myMove()     }     function sleep(milliseconds) {                    var start = new Date().getTime();                    for (var i = 0; i < 1e7; i++) {                        if ((new Date().getTime() - start) > milliseconds){                            break;                        }                    }                 }     function myMove() {         var Nav = document.getElementById("Navbar");         var title = document.getElementById("title");   var elem = document.getElementById("progress-bar");         var prog = document.getElementById("progress")   var progress = 1;   var id = setInterval(frame, 100);   function frame() {     if (progress == 100) {         prog.innerHTML = "100% loaded!"       clearInterval(id);         title.innerHTML = "JS loaded!"         prog.className = "fade-out"         elem.classname += "fade-out"         sleep(2000)         Nav.innerHTML = "<nav class='navbar navbar-expand-md bg-dark navbar-dark fixed-top'><!-- Brand --><a class='navbar-brand disabled ripple' href='#'>Big Brain</a><!-- Toggler/collapsibe Button --><button class='navbar-toggler' type='button' data-toggle='collapse' data-target='#collapsibleNavbar'><span class='navbar-toggler-icon'></span></button><a class='navbar-brand'><img src='https://bigbn.oyosite.com/favicon.png' alt='Logo' style='width:40px;'></a><!-- Navbar links --><div class='collapse navbar-collapse' id='collapsibleNavbar'><ul class='navbar-nav'><li class='nav-item'><p id='clockbox' style='color:white;align-text:center;'></p></li><li class='nav-item'><a class='nav-link ripple' id='home' onclick='loadIndex()'>HOME</a></li><li class='nav-item'><a class='nav-link ripple'>IOS Shortcuts</a></li><li class='nav-item'><a class='nav-link ripple'>Automobile schematics</a></li></ul></div><!--<form class='form-inline'><input class='form-control mr-sm-2' type='search' placeholder='Don't use this' aria-label='Search'><button class='btn btn-outline-success my-2 my-sm-0' type='btn'>Search</button></form>--></nav>"         loadIndex()     } else {       progress++ ;        elem.style.width = progress + "%"       prog.innerHTML = progress + "% loaded"      }   } } function loadIndex() {     var body = document.getElementById("body")     var title = document.getElementById("title")     var home = document.getElementById("home")     title.innerHTML = "Big Brain site"     body.className += "fade-in"     body.innerHTML = ""     home.className = "disabled"          }     function GetClock(){ var d=new Date();           var nhour=d.getHours(),nmin=d.getMinutes(),ap;         if(nhour==0){ap=" AM";nhour=12;} else if(nhour<12){ap=" AM";} else if(nhour==12){ap=" PM";} else if(nhour>12){ap=" PM";nhour-=12;}  if(nmin<=9) nmin="0"+nmin;  var clocktext=""+nhour+":"+nmin+ap+""; document.getElementById('clockbox').innerHTML=clocktext; }  GetClock(); setInterval(GetClock,1000);     

P.S: I Am using Bootstrap 4.5.0 with as little Html, but only Run by JS