今回は文字列を一文字ずつspanタグで囲む方法です。
CSSで一文字ずつアニメーションさせたい時に便利です。
html
<p id="js-text-split">Hello World!</p>
js
var element = document.querySelector('#js-text-split');
var text = element.textContent;
element.innerHTML = null;
text.split('').forEach(function (c) {
element.innerHTML += '<span>'+c+'</span>';
});