A pesar de que innerHTML sea relativamente mucho más rápido, existen ciertas cuestiones que hacen más recomendable el uso de DOM para manejar documentos xHTML.

• innerHTML no es un estándar, es una propiedad de Microsoft (al igual que outerHTML).
• Se supone en un futuro innerHTML no funcionará en los documentos xHTML basados en el MIME type application/xhtml+xml.
• Una de las diferencias principales entre innerHTML y DOM es que el primero es un string y el segundo una estructura de objetos jerárquica (un árbol). Meter un string en un objeto es una auténtica chapuza, por llamarlo de algún modo.
• Perdemos interacción con el objeto (fijar atributos, cambiar valores, …) al ser un string.

Crear un elemento

innerHTML

document.getElementById("contenedor").innerHTML =
                    "<div id="capa" >Texto<!--comentario--></div>";

DOM

div = document.createElement("div");
div.setAttribute("id", "capa");
texto = document.createTextNode("Texto");
div.appendChild(texto);
div_comentario = document.createComment("comentario");
div.appendChild(div_comentario);
document.getElementById("contenedor").appendChild(div);

Obtener el texto de un elemento

innerHTML

texto = document.getElementById("contenedor").innerHTML

DOM

texto = document.getElementById("contenedor").firstChild.nodeValue;

Crear varios elementos

innerHTML

data = new Array("one","two","three");
mHTML = "<ul>";
for(i=0; i<data.length; i++) {
	mHTML+="<li>" + data[i] + "";
}
mHTML+="</ul>";
document.getElementById("contenedor").innerHTML = mHTML;

DOM

data = new Array("one", "two", "three");
eUL = document.createElement("ul");
for(i=0; i<data .length; i++) {
	eLI = document.createElement("li");
	eLI.appendChild(document.createTextNode(data[i]));
	eUL.appendChild(eLI);
}
document.getElementById("contenedor").appendChild(eUL);

Más información | SlayerOffice
Más información | Mozilla Developer Center