La diferencia entre .appendChild(node);
y .innerHTML = htmlCode;
appendChild
appendChild
inserta un nodo al final del elemento especificado en el
DOM
. Requiere un parametro node
► .appendChild(node);
Ejemplo de uso:
.appendChild(document.createElement("p"));
.appendChild(document.createTextNode("Hola SOES"));
function myFunction() {
var text = document.createTextNode("added text");
document.getElementById("text").appendChild(text);
}
<button onclick="myFunction()">ADD TEXT</button>
<span id="text"></span>
innerHTML
innerHTML
es una propiedad del DOM
que permite remplazar el html
de un elemento que se parsea (convierte) directamente en nodos del
DOM
.
Ejemplo de uso:
.innerHTML = "<div>Hola SOES</div>";
function myFunction() {
var text = "added text";
document.getElementById("text").innerHTML=text;
}
<button onclick="myFunction()">ADD TEXT</button>
<span id="text"></span>
Respuesta:
Después de tener esto claro, tu has intentado una fusión de ambas, has comentado que tampoco te funciona cambiando innerHTML
por appendChild
, a lo que supongo que tu error ha sido hacer .appendChild = text;
en vez de .appendChild(text);
. Recomendación al uso de textContent
antes que innerHTML
o innerText
, explicación abajo del todo.
Información adicional:
innerText VS innerHTML
innerText
es mejor respecto a seguridad, no edita el html como tal.
Source:
innerText vs innerHTML
innerHTML
es mejor en rendimiento (pese a que innerHTML
tiene que parsear el HTML), el innerText
se preocupa del estilo del texto por lo que puede llegar a tardar mas.
Source: Performance innerText vs innerHTML
textContent
es mejor SIEMPRE, en rendimiento por no se preocupa del estilo ni tiene que parsear HTML, y en seguridad por que tampoco edita el HTML.