並んでいるaタグの間にスラッシュを自動で挿入する方法

JavaScriptを使用して、並んでいるaタグの間にスラッシュを挿入します。

目的

aタグを横に並べたときに、適当な記号で区切ったデザインにしたい。

毎回手打ちで入力するのは面倒なので自動で補完したい。

sample

以下HTML

<div>
<a href="https://www.jinmusoftware.com/">Home</a>
<a href="https://www.jinmusoftware.com/blog/">Blog</a>
<a href="https://www.jinmusoftware.com/about/">About</a>
</div>

結論と方法

JavaScriptを使用してaタグ間に記号を挿入します。

CSSでは解決できませんでした。

HTML

<p class="addslash">
  <a href="aaa">aaa</a>
  <a href="aaa">bbb</a>
  <a href="aaa">ccc</a>
</p>

ラッパーな要素に「addslash」クラスを付加する。あとからJavaScriptでこれを走査します。

JavaScriptのコード

let sla_tags = document.querySelectorAll('.addslash');
for (const sla_tag of sla_tags) {
  let sub_tags = sla_tag.querySelectorAll('a');
  for (let i = 0; i < sub_tags.length - 1; i++) {
    sub_tags[i].after(" / ");
  }
}

並んでいるaタグの後ろに「 / 」を挿入します。一番最後のaタグに後ろには挿入しません。

テスト・確認

以下区切の記号が挿入されていることを確認できますね。