今回は文字列を一文字ずつ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>';
});