Elements Added Via DOM Aren’t Respecting Class Styles

I have a div element “editorPathDisplay” to display a path (ex: root/something/anotherthing), and I want the ‘/’ characters to be bold to distinguish the separation. To accomplish this, I am trying to populate the editorPathDisplay div with spans. The first in this example would contain “root” and have no classes, the next would contain “/” and have the class “bold”, etc.

The bold class is working when the span contains strings, but when it only contains a slash ‘/’, they don’t appear as bold. I tried this with a different class name and different styling differences, but no class styles appear in the procedurally-added spans when they only contain a slash ‘/’. I’ve attached a code snippet below of my js and the resulting page structure (which looks right!) please let me know what I am doing wrong!

CODE:

var pathDisplay = document.getElementById("editorPathDisplay");
// pathDisplay.innerHtml = "";
pathDisplay.textContent = "PATH: ";
var path = selectedObj.dataset.path;

var pathList = path.split("/");

for (var i = 0; i < pathList.length; i++) {
    var unformatedSpanInsert = document.createElement("span");
    unformatedSpanInsert.textContent = pathList[i]
    pathDisplay.appendChild(unformatedSpanInsert);

    if (i < pathList.length - 1) {
        var spanInsert = document.createElement("span");
        spanInsert.classList.add("bold");
        spanInsert.textContent = "/"; // <- this is the only code changing between Results 1 and 2
        pathDisplay.appendChild(spanInsert);
    }
}

RESULT 1:

enter image description here

enter image description here

RESULT 2:

spanInsert.textContent = "/";

enter image description here

enter image description here

Can someone help me figure out why it’s doing this and how to fix it? If you can think of a better way to accomplish this goal, that would be helpful too. All I want is to fill the string from the path variable, but bold the slashes.

Thanks.