Adding/passing bootstrap class to the 'div' using javascript or jQuery

Question

Folks!!

I am developing a website, in that showing the field errors in javascript alert()

User is not satisfy with the alert pop-up each time, and I thought to provide it in inline div block

I want to know how I can pass/add bootstrap class property{ alert alert-warning } to the error block when I am passing Error Message from the javascript or jquery.

function getValidateField(){
  var varName= document.getElementById('txtNameSetting').value;
  if(varName.trim().length <= 0){
    //alert("Please enter Application Name");
    document.getElementById('divErrorBlock').innerHTML = "Please enter Application Name";
    document.getElementById('divErrorBlock').style.display = 'block';
    //$('#divErrorBlock').show(); 
    return false;
  }
  else return true;
}

If I pass inside the 'div', it will visible all the time, I need to hide this blcok until it get invoke

Thank in advance

Answer 1

Try setAttribute;

document.getElementById('divErrorBlock').setAttribute("class", "alert alert-warning");

or jquery addClass()

$('#divErrorBlock').addClass('alert alert-warning');

or using attr()

 $('#divErrorBlock').attr('class','alert alert-warning');

Answer 2

If you can use jquery. It is as simple as this.

$('#divErrorBlock').addClass('alert alert-warning');