JavaScriptを使ってHTML要素内の1文字ごとにスタイルを適用（タグを挿入）する方法

一文字ごとにスタイルを適用させたい

例えば以下のようなものを作りたいとします。

ここで最も簡単なのは、下記のように一文字ずつspanタグで囲んでスタイリングする事だと思います。

HTML

<p>
  <span>G</span><span>o</span><span>o</span><span>g</span><span>l</span><span>e</span>
</p>

ただ、これだと一々面倒ですし、単語の長さや使用頻度によっては見通しの悪いコードになってしまいます。
そこでJavaScriptを使って、出来るだけ新しく且つ直感的に分かり易いコードで関数に纏めて、再利用できる形にしていきたいと思います。

私なりの最も分かり易いやり方

以下のようになりました。

HTML

<p id="insert"></p>

JavaScript

const insertTag = (target, word) => {
  for(const character of word) {
    document.querySelector(target).innerHTML += `<span>${character}</span>`;
  }
}

insertTag('#insert', 'Google');

挙動としては、Stringをfor...ofでループさせると一文字ずつ処理が行えるので、第一引数で指定した要素にinnerHTMLを用いてその文字ごとにspanタグを挿入しています。

念のため<p id="insert"></p>の中身をデベロッパーツールで確認してみます。

問題なく動作していました。

動作デモ → https://jsfiddle.net/vmj9xagu/

タグ毎にclassを付けたい場合

今度はforEachを使い、分かりやすくclassにindexを使用し番号が1から始まるようにしました。

JavaScript

const insertTag = (target, word) => {
  [...word].forEach((character, index) => {
    document.querySelector(target).innerHTML += `<span class="item${++index}">${character}</span>`
  })
}

insertTag('#insert', 'Google');

こちらの挙動は、第ニ引数のwordをスプレッド演算子を用いて配列化しています。
[...word]の中身を確認してみると、以下のようになっています。

そしてこれに対してforEachでループして一文字ごとにspanタグを挿入しています。
前者もforEachで行っても良かったのですが、タグ付けするだけで良い場合はfor...ofの方がコードが簡潔に書けるのでそちらを採用しました。

こちらも念の為<p id="insert"></p>の中身を確認してみます。

問題なく動作していました。(*ﾟ▽ﾟﾉﾉﾞ☆ﾊﾟﾁﾊﾟﾁﾊﾟﾁ

動作デモ → https://jsfiddle.net/hpw46f9n/