/* This script works in application/xhtml+xml or text/html documents.
This script requires you to edit your WordPress Template's Comments file and Header file.

Modifications in the Header file:
Place this script inside your 'head' element. You should delete these comments, when
you're done with the setup.

Modifications to your Comments file:
	Above the 'Leave a Reply' sentenc, you'll need to place an empty 'div' with
	the an id like 'nocommentsyet':
		<div id="nocommentsyet"></div>
	You'll have to add an 'id' attribute like 'commentlist' to your 'ol' or 'ul'
	element that lists your comments. The result will be something like this:
		<ol id="commentlist" class="commentlist">
	You'll have to add an 'id' attribute like 'loggedin' to your anchor element
	that is almost at the end (next to a 'Logged in as' text). The beginning of
	the anchor element will look like:
		<a id="loggedin" href="<?php echo get_option('siteurl'); ?>
	Some WordPress templates don't set a class for their non-alternate comments...
	Only the 'alt' comments are styled, but since having class="" is an invalid
	markup syntax, you should set it to something like 'notalt':
		if ('alt' == $oddcomment) $oddcomment = 'notalt';
	After that, you have to set the onkeyup and onchange event attributes to
	the fields you want to monitor. For example, the 'author' field would look
	like:
		<input id="author" type="text" style="width:200px; color:#008000; background-color:#faf4f4; border-width:2px; border-color:#e0e0d0;" value="rolandog" onkeyup="previewcomment();" onchange="previewcomment();" />
	Next, you can set the names for your ids and other elements in these global variables:
*/
var checkFor = "page";
var previewId = "preview";
var commentListId = "commentlist";
var commentListClass = "commentlist";
var loggedInId = "loggedin";
var noCommentsYetId = "nocommentsyet";
var altClassName = "alt";
var notaltClassName = "notalt";
var listType = "ol";
var authorId = "author";
var urlId = "url";
var textAreaId = "comment";

function cleanWhitespace(someelement) {
	var element = document.getElementById(someelement);
	for (var i = 0; i < element.childNodes.length; i++) {
		var node = element.childNodes[i];
		if (node.nodeType == 3 && !/S/.test(node.nodeValue)) {
			element.removeChild(node);
		}
	}
}
function killsChildNodes(an_element) {
	while (an_element.hasChildNodes()) {
		if (!an_element.firstChild.hasChildNodes()) {
			var k = an_element.firstChild;
			an_element.removeChild(k);
		} else {
			killsChildNodes2(an_element.firstChild);
		}
	}
}
function killsChildNodes2(another_element) {
	while (another_element.hasChildNodes()) {
		if (!another_element.firstChild.hasChildNodes()) {
			var k2 = another_element.firstChild;
			another_element.removeChild(k2);
		} else {
			killsChildNodes(another_element.firstChild);
		}
	}
}
function killAllChildNodesFrom(bob) {
	if(document.getElementById(bob).hasChildNodes()) {
		killsChildNodes(document.getElementById(bob));
	}
}
function previewComment() {
	if(document.getElementById(commentListId)) {
		var commentlist = document.getElementById(commentListId);
		cleanWhitespace(commentListId);
	} else {
		var l = document.createElement(listType);
		l.setAttribute("id", commentListId);
		l.setAttribute("class", commentListClass);
		document.getElementById(noCommentsYetId).appendChild(l);
		var commentlist = document.getElementById(commentListId);
	}
	if(document.getElementById(previewId)) {
		var preview = document.getElementById(previewId);
		killAllChildNodesFrom(previewId);
		preview.parentNode.removeChild(preview.parentNode.lastChild);
	}
	var cclass = altClassName;
	if (commentlist.hasChildNodes()) {
		var lastcomment = commentlist.lastChild;
		if (lastcomment.getAttribute("class") == altClassName) {
			cclass = notaltClassName;
		}
	}
	var fsetbegin = '<fieldset><legend>Comment Preview<\/legend>';
	var fsetend = '<\/fieldset>';
	if(document.getElementById(loggedInId)) {
		var aname = document.getElementById(loggedInId).childNodes[0].nodeValue;
		aname = aname.toString();
		var url = location.href;
	} else {
		var aname = document.getElementById(authorId).value;
		var url = document.getElementById(urlId).value;
	}
	if(url == "") {
		var who = "<cite>" + aname + "<\/cite> Says:";
	} else {
		var who = "<cite><a href=\'" + url + "\'>" + aname + "<\/a><\/cite> Says:";
	}
	var li = document.createElement("li");
	li.setAttribute("id",previewId);
	li.setAttribute("class",cclass);
	var saidwhat = document.getElementById(textAreaId).value;
	if(document.getElementById(checkFor).namespaceURI) {
		saidwhat = saidwhat.replace(/\n/g, "<br \/>");
		var parser = new DOMParser();
		var doc = parser.parseFromString('<div xmlns="http://www.w3.org/1999/xhtml">' + fsetbegin + who  + '<br \/>' + saidwhat + fsetend + '<\/div>', 'application/xhtml+xml');
		var root = doc.documentElement;
		commentlist.appendChild(li);
		for (var i=0; i < root.childNodes.length; ++i) {
			commentlist.lastChild.appendChild(document.importNode(root.childNodes[i], true));
		}
	} else {
		saidwhat = saidwhat.replace(/\n/g, "<br>");
		commentlist.appendChild(li);
		document.getElementById(previewId).innerHTML = fsetbegin + who + "<br>" + saidwhat + fsetend;
	}
}

function cleanWhitespace(someelement) {
	var element = document.getElementById(someelement);
	for (var i = 0; i < element.childNodes.length; i++) {
		var node = element.childNodes[i];
		if (node.nodeType == 3 && !/S/.test(node.nodeValue)) {
			element.removeChild(node);
		}
	}
}
function killsChildNodes(an_element) {
	while (an_element.hasChildNodes()) {
		if (!an_element.firstChild.hasChildNodes()) {
			var k = an_element.firstChild;
			an_element.removeChild(k);
		} else {
			killsChildNodes2(an_element.firstChild);
		}
	}
}
function killsChildNodes2(another_element) {
	while (another_element.hasChildNodes()) {
		if (!another_element.firstChild.hasChildNodes()) {
			var k2 = another_element.firstChild;
			another_element.removeChild(k2);
		} else {
			killsChildNodes(another_element.firstChild);
		}
	}
}
function killAllChildNodesFrom(bob) {
	if(document.getElementById(bob).hasChildNodes()) {
		killsChildNodes(document.getElementById(bob));
	}
}
function previewComment() {
	if(document.getElementById("commentlist")) {
		var commentlist = document.getElementById("commentlist");
		cleanWhitespace("commentlist");
	} else {
		var ol = document.createElement("ol");
		ol.setAttribute("id", "commentlist");
		ol.setAttribute("class", "commentlist");
		document.getElementById("nocommentsyet").appendChild(ol);
		var commentlist = document.getElementById("commentlist");
	}
	if(document.getElementById("preview")) {
		var preview = document.getElementById("preview");
		killAllChildNodesFrom("preview");
		preview.parentNode.removeChild(preview.parentNode.lastChild);
	}
	var cclass = "alt";
	if (commentlist.hasChildNodes()) {
		var lastcomment = commentlist.lastChild;
		if (lastcomment.getAttribute("class") == "alt") {
			cclass = "notalt";
		}
	}
	var fsetbegin = '<fieldset><legend>Comment Preview<\/legend>';
	var fsetend = '<\/fieldset>';
	if(document.getElementById("loggedin")) {
		var name = document.getElementById("loggedin").childNodes[0].nodeValue;
		name = name.toString();
		var url = location.href;
	} else {
		var name = document.getElementById("author").value;
		var url = document.getElementById("url").value;
	}
	if(url == "") {
		var who = "<cite>name<\/cite> Says:";
	} else {
		var who = "<cite><a href=\'" + url + "\'>" + name + "<\/a><\/cite> Says:";
	}
	var li = document.createElement("li");
	li.setAttribute("id","preview");
	li.setAttribute("class",cclass);
	var saidwhat = document.getElementById("comment").value;
	if(document.getElementById("page").namespaceURI) {
		saidwhat = saidwhat.replace(/\n/g, "<br \/>");
		var parser = new DOMParser();
		var doc = parser.parseFromString('<div xmlns="http://www.w3.org/1999/xhtml">' + fsetbegin + who  + '<br \/>' + saidwhat + fsetend + '<\/div>', 'application/xhtml+xml');
		var root = doc.documentElement;
		commentlist.appendChild(li);
		for (var i=0; i < root.childNodes.length; ++i) {
			commentlist.lastChild.appendChild(document.importNode(root.childNodes[i], true));
		}
	} else {
		saidwhat = saidwhat.replace(/\n/g, "<br>");
		commentlist.appendChild(li);
		document.getElementById("preview").innerHTML = fsetbegin + who + "<br>" + saidwhat + fsetend;
	}
}

For a working demo in application/xhtml+xml or text/html, go to:
http://rolandog.com/archives/2006/07/10/litebox-demasiado-bueno-para-ser-cierto/

You should delete the multi-line comments after completing the setup, some old browsers will complain about those.

Wordpress XHTML and HTML Comment Preview

html, xhtml, wordpress, DOM

JavaScript