时间戳

首页 > 解决方案 > insertAdjacentElement 和纯空格文本节点

javascript - insertAdjacentElement 和纯空格文本节点

问题描述

我正在使用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>

标签： javascriptfirefox

解决方案

空文本节点存在于您的代码中，以

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

查看>of thebibl和<of之间的空格author。

删除它，您将看不到Mr作者和作者之间的任何空格：

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>

推荐阅读