CODEWITHSUNDEEP
javascripthtml
user9690594
user9690594

Reputation:

insertBefore javascript, add element between links

I'm trying to add an item span with textnode. I make a breadcrumbs and I need this structure.

Home > About > Project

And I done it. But can't append > between these elements with JS :)

I need append span element between links. How I do that? But he should not be the last, only between

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>

Thanks!)

Upvotes: 0

Views: 168

Answers (1)

Ori Drori
Ori Drori

Reputation: 191996

Use document.querySelectorAll() to get all a elements but the 1st, and use Node.insertBefore() to add the span before the a elements:

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>

Upvotes: 1

Related Questions