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:
RESULT 2:
spanInsert.textContent = "/";
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.