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
pero una cosa simple y tal… yo solo quiero introducir texto a un div q tengo con un id… como lo harÃa con el dom? pq veo ahi mucha parafernalia de crear elementos y tal… pero solo quiero meterle un texto only eso… lo q serÃa la primera opción del innerhtml pero en algo más sencillo pq el elemento div ya está creado…
pero es lo que mas usan. Ni hablar.
