Contenido en el DOM

Si tenemos elementos HTML y queremos modificar su contenido, podemos hacerlo desde Javascript desde ciertas propiedades de elementos del DOM. Estas propiedades son muy útiles tanto para obtener información, para modificarla, así como para eliminarla. Vamos a analizar como podemos hacerlo.

Antes de empezar imáginemos que tenemos el siguiente código HTML:

<div class="container">
  <div class="parent">
    <p>Hola a todos.</p>
    <p class="message">Mi nombre es <strong>Manz</strong>.</p>
  </div>
</div>

Vamos a seleccionar el elemento <p> con clase .message desde Javascript y a trabajar con él accediendo a varias de sus propiedades. Las propiedades a las que vamos a acceder son las siguientes:

La propiedad nodeName nos devuelve el nombre del nodo, que en elementos HTML es interesante puesto que nos devuelve el nombre de la etiqueta (en mayúsculas). Se trata de una propiedad de sólo lectura, por lo cuál no podemos modificarla, sólo acceder a ella.

La propiedad .textContent

La propiedad .textContent nos devuelve el contenido de texto de un elemento HTML. Es útil para obtener (o modificar) sólo el texto dentro de un elemento, obviando el marcado o etiquetado HTML:

const element = document.querySelector(".message");

element.textContent;                   // "Mi nombre es Manz."
element.textContent = "Hola a todos";
element.textContent;                   // "Hola a todos"

Como puedes ver, no sólo podemos utilizar la propiedad .textContent para acceder a la información de texto que contiene, sino también para reemplazar su contenido, simplemente asignándolo como si fuera una variable o constante.

Observa la etiqueta <strong>: En el caso de que el elemento tenga anidadas varias etiquetas HTML una dentro de otra, la propiedad .textContent se quedará sólo con el contenido textual.

Las propiedades .innerText y .outerText

La propiedad .innerText es muy similar a .textContent, pero tiene una diferencia clave: accede al texto renderizado visualmente por el navegador. Por ejemplo, observa el siguiente fragmento de código:

<div class="container">
  <p>Hola a todos.</p>
  <p>Me llamo <strong>Manz</strong>. <mark style="display: none">New message</mark></p>
  <p hidden>Esto es un mensaje posterior oculto semánticamente.</p>
  <details>
    <summary>Más información</summary>
    <div>Esto es un desplegable que está colapsado.</div>
  </details>
</div>

Observa que:

• El contenido de la etiqueta <mark> está oculto mediante CSS.
• El contenido de la tercera etiqueta <p> está oculto semánticamente mediante el atributo hidden.
• El contenido de la etiqueta <div> dentro del <details> está oculto porque el acordeón está colapsado.

Si consultamos el contenido de texto del .container mediante la propiedad .textContent nos devolvería todo el contenido de texto de todas las etiquetas del interior del .container. Sin embargo, si lo hacemos mediante la propiedad .innerText nos devolvería lo siguiente:

const element = document.querySelector(".container");
element.innerText;

// "Hola a todos.
//
// Me llamo Manz.
//
// Más información"

La propiedad .innerHTML

Por otro lado, tenemos la propiedad .innerHTML, que nos permite acceder al contenido de un elemento, pero en lugar de devolver su contenido de texto, nos devuelve su contenido HTML, es decir, su marcado HTML. Esto tiene varias implicaciones que explicaremos más adelante.

Primero, un ejemplo con la diferencia entre .textContent y .innerHTML:

const element = document.querySelector(".message");

element.innerHTML;    // "Mi nombre es <strong>Manz</strong>."
element.textContent;  // "Mi nombre es Manz."

De la misma forma que .textContent, también podemos usar .innerHTML para modificar el contenido. Ten en cuenta que el contenido HTML suministrado a .innerHTML se interpretará, mientras que el suministrado por .textContent se inserta literalmente como texto:

element.innerHTML = "<strong>Importante</strong>";    // Se lee "Importante" (en negrita)
element.textContent = "<strong>Importante</strong>";  // Se lee "<strong>Importante</strong>"

Ten mucho cuidado a la hora de insertar contenido HTML utilizando .innerHTML puesto que si añades contenido que provenga del usuario sin revisarlo, podrían insertar HTML que realice acciones dañinas como inyección de código malicioso.

Parseo de marcado HTML

Ten en cuenta que la propiedad .innerHTML comprueba y parsea el marcado HTML escrito (corrigiendo si hay errores) antes de realizar la asignación. Por ejemplo, observa el siguiente código:

const div = document.createElement("div");
div.innerHTML = "<strong>Manz";
div.innerHTML   // "<strong>Manz</strong>"

Aunque hemos insertado el HTML incompleto con .innerHTML, si examinamos el contenido, podemos ver que está completo. Esto ocurre porque el navegador parsea e intenta que el código HTML sea correcto en todo momento.

Esto puede provocar algunas incongruencias si el código es incorrecto o una disminución de rendimiento en porciones de código muy extensas o que hay que procesar múltiples veces.

La propiedad .outerHTML

La propiedad .outerHTML es muy similar a la anterior. Mientras que .innerHTML devuelve el código HTML del interior de un elemento HTML, .outerHTML devuelve el código HTML desde el exterior, es decir, incluyendo al propio elemento implicado:

const data = document.querySelector(".data");
data.innerHTML = "<h1>Tema 1</h1>";

data.textContent;   // "Tema 1"
data.innerHTML;     // "<h1>Tema 1</h1>"
data.outerHTML;     // "<div class="data"><h1>Tema 1</h1></div>"

Al igual que hemos visto anteriormente, se puede utilizar .outerHTML asignando textos para modificar su contenido. Esto puede ser muy útil para reemplazar un elemento HTML, incluido el propio elemento HTML contenedor.

El método .setHTML()

El método .setHTML() es muy interesante para insertar contenido HTML sin preocuparte excesivamente por temas de seguridad, como suele ocurrir con .innerHTML. Su utilización es muy sencilla, observa el siguiente fragmento de código:

const container = document.querySelector(".container");
const unsafe_html = "<strong onmouseover='alert(\"hello\")'>Hello</strong>";

container.innerHTML = unsafe_html;    // Introduce literalmente el código HTML
container.setHTML(unsafe_html);       // Introduce "<strong>Hello</strong>"

Opcionalmente, se le puede pasar un segundo parámetro de opciones, donde se puede configurar un sanitizador. Cuidado con el uso de este método, ya que aún no está implementado en todos los navegadores: