insertAdjacentElement 和纯空白文本节点

Question

我正在使用 insertAdjacentElement 方法在另一个已经存在的元素之前添加一个元素。虽然当我在文本元素之前插入时这可以正常工作，但当我在另一个元素之前插入一个元素时，我在中间得到一个纯空白文本节点 (Firefox)。

知道如何防止创建该节点吗？还是我应该自己尝试删除它？ :-/

  let name = document.getElementById("foo");
  let mr = document.createElement("span");
  mr.textContent = "Mr";
  mr.setAttribute("class", "foo");
  name.insertAdjacentElement("afterbegin", mr);

author { border: solid 1px #000000; }
span { border: solid 1px #ff0000; }

<bibl id="foo">
  <author>John</author>
  <myTitle>Foo</myTitle>
  <page>bar</page>
</bibl>

Answer 1

空文本节点存在于您的代码中以开头，给定

<bibl id="foo">
  <author>John</author>

看到bibl的>和author的<之间的白色space。

删除它，您将不会在 Mr 和作者之间看到任何 space：

let name = document.getElementById("foo");
  let mr = document.createElement("span");
  mr.textContent = "Mr";
  mr.setAttribute("class", "foo");
  name.insertAdjacentElement("afterbegin", mr);

author { border: solid 1px #000000; }
span { border: solid 1px #ff0000; }

<bibl id="foo"><author>John</author>
  <myTitle>Foo</myTitle>
  <page>bar</page>
</bibl>

insertAdjacentElement 和纯空白文本节点

insertAdjacentElement and whitespace-only text node

javascript

firefox