spanChars

gistfile1.js

function spanChars(e)
{
	if (!e) e = document.body;
	
	// Replace the text node with a span for each letter it consists of
	if (e.nodeType == document.TEXT_NODE)
	{
		var text = e.nodeValue;
		
		for (var c = 0; c < text.length; c++)
		{
			// Create the span element around the letter
			var span = document.createElement("span");
			span.className = "letter";
			span.appendChild(document.createTextNode(text.charAt(c)));
			
			// Put the span in before the text node
			e.parentNode.insertBefore(span, e);
		}
		
		// Remove the original text node (we can now consider it replaced)
		e.parentNode.removeChild(e);
	}
	
	// Otherwise check the child nodes
	else {
		for (var c = e.childNodes.length-1; c >= 0; c--) {
			spanChars(e.childNodes[c]);
		}
	}
	
}

window.onload = function()
{
	var h2 = document.getElementsByTagName("h2");
	
	for (var i = 0; i < h2.length; i++)
	{
		spanChars(h2[i]);
		console.log(h2[i]);
	}
}