HTML DOM with Javascript: why DOM instead innerHTML

DO NOT use innerHTML, use DOM.

Althought innerHTML is supposed to be faster than DOM, there are some reasons that make DOM the best option to use HTML documents:

• innerHTML IS NOT A STANDART, it is a Microsoft own (also outerHTML is).
• It's supposed that in the future innerHTML won't work propertly in xHTML based on MIME type application/xhtml+xml documents.
• One of the main diferences between innerHTML and DOM is that innerHTML is a string and DOM is a hierarchical object structure (tree). Insert a string in an object is a complete "botch"
• Using and innerHTML string, the interaction with the object is lost.

Creating an element:

// 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);

Getting text of an element:

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

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

Creating multiple elements:

//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);

Source:
http://alfonsojimenez.com/uncategorized/no-uses-innerhtml-usa-dom/