4

En qué estoy fallando ya que no me inserta el texto y solo me aparece '[object Text]' ya intenté cambiando innerHTML por appendChild pero sigue sin funcionar

function myFunction() {
  var text = document.createTextNode("added text");
  document.getElementById("text").innerHTML = text;
}
<button onclick="myFunction()">ADD TEXT</button>

<span id="text"></span>

2 respuestas 2

7

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.

3
  • 1
    ¿Para añadir texto a un span no es mejor usar .innerText? Commented el 21 jun. 2019 a las 11:29
  • @FernandoCarrascosa, Gracias a tu pregunta he investigado y descubierto que es mejor respecto a seguridad, no edita el html como tal. innerText vs innerHTML Pero en rendimiento no (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. Performance innerText vs innerHTML. En resumen lo mejor es usar textContent para textos planos.
    – x3k
    Commented el 21 jun. 2019 a las 11:52
  • Claro, .innerText te escapa las etiquetas HTML que haya en el contenido y devuelve sólo texto. Supongo que el uso depende del contexto. Commented el 21 jun. 2019 a las 11:55
2

Borre esta linea document.createTextNode, abajo dejo el ejemplo

function myFunction() {
  var text = "added text";
  document.getElementById("text").innerHTML = text;
}
<button onclick="myFunction()">ADD TEXT</button>

<span id="text"></span>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.