I am trying to add a span element before a referenced span element. However, there seems to be no space between the new element and the referenced span element.
// Create a new, plain <span> element let sp1 = document.createElement("span"); // Set class attribute and value sp1.setAttribute("class", "new-element"); // Write content to element sp1.innerText = "foo bar"; // Get the reference element let sp2 = document.querySelector(".third-element"); // Get the parent element let parentDiv = sp2.parentNode; // Insert the new element into before sp2 parentDiv.insertBefore(sp1, sp2);
<div id="main-container"> <span>foo bar</span> <span>foo bar</span> <span class="third-element">foo bar</span> <span>foo bar</span> </div>
Juan Pablo Isaza
<span>new element</span><span>existing element</span>
When spans are inline with no line break, the browser does not render that magic space character. The easiest fix for this is to add some
margin-right with CSS, or to just to append a space character to the text in your spans like so:
<span>This is my text </span>