Why does insertBefore work weirdly with the span element?-CodePudding

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 >foo bar</span>
    <span>foo bar</span>
</div>

CodePudding user response：

In your HTML, you have a line break after each span element which ends up being turned into a space character (technically not a space character, but the browser shows it to you this way). When you add a span with javascript, it gets inserted inline like this:

new elementexisting element

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:

This is my text 