Question

我正在尝试添加带有span的项目textnode。我做一个面包屑，我需要这种结构。

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>

insertjavascript之前，请在链接之间添加元素

1 个答案: