I have a div called "editorPathDisplay" where I want to display a path like root/something/anotherthing, with the '/' characters in bold to distinguish the separation. My approach is to populate the editorPathDisplay div with spans: the first would contain "root" with no classes, the next would contain "/" with the class "bold", and so on.
The issue arises when the span only contains a slash '/'; it does not appear bold. I have tried using different class names and styles, but nothing seems to work for procedurally-added spans with the sole content of a slash '/'. Below is my JavaScript code and the resulting page structure - which appears correct! Please help me identify what I am doing wrong!
CODE:
var pathDisplay = document.getElementById("editorPathDisplay");
pathDisplay.textContent = "PATH: ";
var path = selectedObj.dataset.path;
var pathList = path.split("/");
for (var i = 0; i < pathList.length; i++) {
var unformattedSpanInsert = document.createElement("span");
unformattedSpanInsert.textContent = pathList[i];
pathDisplay.appendChild(unformattedSpanInsert);
if (i < pathList.length - 1) {
var spanInsert = document.createElement("span");
spanInsert.classList.add("bold");
spanInsert.textContent = "/";
pathDisplay.appendChild(spanInsert);
}
}
RESULT 1:
https://example.com/result1.png
RESULT 2:
spanInsert.textContent = "/";
https://example.com/result2.png
Could you please help me understand why this is happening and suggest a solution? If you have a better way to achieve my goal of bolding the slashes in the displayed path string, I would appreciate your input. All I need is to display the path variable string with bolded slashes.
Thank you.