为什么 insertBefore 与 span 元素一起工作很奇怪？

Question

我正在尝试在引用的跨度元素之前添加一个跨度元素。但是，新元素和引用的跨度元素之间似乎没有space。

// 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>

Answer 1

在您的 HTML 中，每个 span 元素后都有一个换行符，最终会变成 space 字符（技术上不是 space 字符，但浏览器会显示以这种方式给你）。当您使用 javascript 添加跨度时，它会像这样内联插入：

new elementexisting element

当 span 内联时没有换行符，浏览器不会呈现那个神奇的 space 字符。最简单的解决方法是添加一些 margin-right 和 CSS，或者只是将 space 字符附加到您的 span 中的文本，如下所示：

This is my text 

为什么 insertBefore 与 span 元素一起工作很奇怪？

Why does insertBefore work weirdly with the span element?

html

javascript

dom