Estoy tratando de agregar un elemento de intervalo antes de un elemento de intervalo al que se hace referencia. Sin embargo, parece que no hay espacio entre el nuevo elemento y el elemento de intervalo al que se hace referencia.
// 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>
En su HTML, tiene un salto de línea después de cada elemento de intervalo que termina convirtiéndose en un carácter de espacio (técnicamente no es un carácter de espacio, pero el navegador se lo muestra de esta manera). Cuando agrega un lapso con javascript, se inserta en línea de esta manera:
<span>new element</span><span>existing element</span>
Cuando los intervalos están en línea sin salto de línea, el navegador no representa ese carácter de espacio mágico. La solución más fácil para esto es agregar algo margin-right
con CSS, o simplemente agregar un carácter de espacio al texto en sus intervalos de esta manera:
<span>This is my text </span>