Javascript: adding bold text dynamically within paragraph

Question

I'm trying to append a text to web page and some of it as bold dynamically through Javascript. But the bold text moves to new line and not within same line. I would like it to be at same line. Here is the output:

My code is:

var paraNode = document.createElement('p');
paraNode.className = "card card-body";
var textToAppend = " Passenger Revenue for " + month + " " + year + ": " + String(totalValue).bold();
paraNode.innerHTML = textToAppend
notebookElement.appendChild(paraNode)

I have also tried using <strong> tag replacing .bold() but the result is same.

Answer 1

I tried and looks fine I think CSS could be the Issue.

 var paraNode = document.createElement('p'); paraNode.className = "card card-body"; var textToAppend = " Passenger Revenue for " + String("34").bold(); paraNode.innerHTML = textToAppend document.body.appendChild(paraNode)