javascript - insertBefore javascript，在链接之间添加元素

Question

我正在尝试使用 textnode 添加项目 span。我制作了面包屑，我需要这个结构。

Home > About > Project

我做到了。但无法使用 JS 在这些元素之间附加 > :)

我需要在链接之间附加 span 元素。我怎么做到这一点？但他不应该是最后一个，只是之间

var mvalue = document.getElementById('abc').children;
//console.log(mvalue);
var para = document.createElement("span");
var t = document.createTextNode(">");
para.appendChild(t);
mvalue.insertBefore(para, mvalue.children[1]);

<div id='abc'>
  <a href="#">Home</a>
  <a href="#">About</a>
  <a href="#">Project</a>
</div>

谢谢!)

Answer 1

使用document.querySelectorAll()获取全部a除第一个元素外，并使用 Node.insertBefore()添加span之前a元素:

document.querySelectorAll('#abc > a:not(:first-child)')
.forEach(el => {
  const para = document.createElement("span");
  const t = document.createTextNode('>');
  para.appendChild(t);
  el.parentNode.insertBefore(para, el);
})

<div id="abc">
  <a href="#">Home</a>
  <a href="#">About</a>
  <a href="#">Project</a>
</div>