how to style the variable on JS without DOM

I’m about to style the “newResult” with green if passed and red if failed. I’m confused how to style them since the “newResult” is not DOM.

@param {string} idIn

function checkId(idIn) { 
  let isIDin = false;
  let regexID = /^n|N[0-9]{8}$/i;

  if (regexID.test(idIn)) {
      isIDin = true;
  }
   return isIDin;
}

function test__checkId(valueIn, expected){
   let result = checkId(valueIn);
   var newResult;

//Print out value we are testing, and result of the function, and our expectation.
   if (result){
    newResult="==PASSED==";
   } else {
    newResult="XXFAILEDXX";
   }

let msg = "Value tested: " + valueIn + " | Expected result: " + expected + " " + newResult + "<br />";

 document.getElementById("data").innerHTML+=msg;
} 

//TIME TO RUN OUR UNIT TEST FUNCTION ON OUR checkHumberID FUNCTION...
test__checkId("n99999999",true); //boundary testing
test__checkId("n00000000",true); //boundary testing
test__checkId("ASFASDF",true); //boundary testing

Answer

You can make use of JavaScript template literals, ternary/conditional operator and inline CSS to accomplish what you’re looking for.

The syntax might look confusing at first look, but it does the job.

let msg = "" ;
msg+=`Value tested:"${valueIn}" | Expected result:"${expected}" "${newResult == "==PASSED==" ? "<span style='color:green ;font-weight:bold'>==PASSED==</span>":"<span style='color:red ;font-weight:bold'>XXFAILEDXX</span>"} <br>` ;
                                                                                                         
document.getElementById("data").innerHTML+=msg;