Как обернуть первый символ span'ом?

Question

[William]

например,
<h2>Заголовок</h2>

требуется:
<h2><span>З</span>аголовок</h2>

Comments

[v3shin]

Вопрос только зачем. Если вы хотите его только стилизовать, это можно сделать и через css: ::first-letter.

[William]

v3shin, совсем забыл!!!! да, это нужное

Answer 1

[Сергей Соколов]

const wrapFirstLetter = el => {
  const letter = el.textContent[0];
  el.innerHTML = `<span>${letter}</span>${el.textContent.substring(1)}`;
}

wrapFirstLetter(document.querySelector('h2'));

Comments

[William]

великолепно!

[Сергей Соколов]

William, Disclaimer: это убьёт всю внутреннюю разметку внутри элемента, если таковая была

Answer 2

[otdameskapizm]

Можно еще попробовать без JS, через псевдоэлементы:

h2::first-letter {
  color: red;
}