Inner HTML in Java Script

Hi guys, I am a baby developer. I am trying to have a bold heading and the values are passed through js file .hbs file has no reference to the heading.

model() {
  const ps = this.Session;
  var key = "xyz";
  var val = "pqr";    
   return {
    columns: [
      {
        name: ps.translate("Parameter.abc),
        valuePath: "abc",            
      },
      { 
        
        name: ps.translate(key),
        valuePath: "xyz",
      },
      {
        name: ps.translate(val),
        valuePath: "pqr",
      },
        
      {
          name: "",
          valuePath: "id",
          cellComponent: "update-parameter"
      },
    ]

The Headings would be abc, xyz, pqr. I tried using the command document.getElementById(“valuePath”).innerHTML = “Sample text”; but it is giving me an error " document.getElementById(”") is Null. Not sure where I am going wrong. Is there any other way to do?

Thanks for helping!

Hi @Chaitali_Wani, it’s a little hard to tell what’s going on here just from this model hook, but if you’re trying to make headings, and make them bold, you’ll want to do that in the template layer 99% of the time. The template (.hbs) is where the headings will be rendered (even if it’s not in a super straightforward manner) and typically if you want to make something bold you’d use CSS, though you could put the heading in a <strong> tag. Really depends on the context and how the template works. Could you share the template code as well?