createElement y createTextNode

Tabla de contenidos

1. Introducción
2. createElement
3. createTextNode
4. Una nota sobre innerHTML

Introducción

El DOM nos ofrece una serie de métodos para añadir nodos al árbol de un documento, pero los más básicos son createElement, que crea un elemento, y createTextNode, que crea un nodo de texto.

Los ejemplos de estos dos métodos los veremos conjuntamente con los de la siguiente sección del curso.

createElement

Teniendo en cuenta que por medio del DOM podemos crear un documento prácticamente de la nada¹, no es de extrañar que proporcione un método para crear un elemento concreto.

La sintaxis de createElement es muy sencilla:

    document.createElement('elemento_a_crear');
            

Así, crear un nuevo párrafo es tan simple como document.createElement('p') —nota: atención a las comillas—. Eso sí, el elemento no será visible, no es más que una especie de fantasma que existe en el documento, pero hasta que no se le asigne una posición en el árbol no se mostrará al usuario. Cómo incluirlo en el árbol lo veremos en la siguiente sección.

createTextNode

Al igual que podemos crear un elemento, podemos crear un texto con el que poblarlo por medio de createTextNode.

Su sintaxis:

    document.createTextNode('el_texto_que_desee');
            

Igual que para el elemento creado arriba, el texto a crear por medio de este método debe ir entrecomillado. Y de la misma manera también, el texto existe, pero en ninguna parte. Si quisieramos, por ejemplo, crear un nuevo párrafo en un documento con el texto «Menos que Macbeth, pero más grande», tendríamos que crear primero el elemento p, luego el nodo de texto, y por último convertir el nodo de texto en el hijo del párrafo por medio de appendChild, método que veremos en la siguiente parte del curso. Algo así:

    var parrafo = document.createElement('p');
    var texto = document.createTextNode('Menos que Macbeth, pero más grande');
    parrafo.appendChild(texto);
            

Con ello nuestra variable parrafo contendría un elemento p con su texto correspondiente, listo para ser incluido en el árbol del documento.

Una nota sobre innerHTML

Con los dos métodos anteriores se podría crear un elemento con su texto, pero hay situaciones en las que emplearlos para crear un nuevo nodo en el árbol del documento puede ser un proceso arduo. Supongamos, por ejemplo, que quiero crear un nodo como éste:

    <p>Éste es un párrafo con una palabra <em>enfatizada</em> y otras aún <strong>más enfatizadas</strong>.</p>
            

Desde el punto de vista del DOM tenemos un nodo padre (p), que contiene:

• Un primer hijo que es un nodo de texto (Éste es un párrafo con una palabra).
• Un segundo hijo que es em, que a su vez tiene un hijo (enfatizada).
• Un tercer hijo que es otro nodo de texto (y otras aún).
• Un cuarto hijo, strong, con su propio hijo (más enfatizadas).
• Un quinto hijo, también un nodo de texto (.).

Crearlo con los dos métodos vistos requeriría un código como éste:

    var elem_p = document.createElement('p');
    var elem_em = document.createElement('em');
    var elem_strong = document.createElement('strong');
    var txt_01 = document.createTextNode('Éste es un párrafo con una palabra ');
    var txt_02 = document.createTextNode('enfatizada');
    var txt_03 = document.createTextNode(' y otras aún ');
    var txt_04 = document.createTextNode('más enfatizadas');
    var txt_05 = document.createTextNode('.');
    elem_em.appendChild(txt_02);
    elem_strong.appendChild(txt_04);
    elem_p.appendChild(txt_01);
    elem_p.appendChild(elem_em);
    elem_p.appendChild(txt_03);
    elem_p.appendChild(elem_strong);
    elem_p.appendChild(txt_05);
            

Como se puede ver, es un gasto inútil de recursos en vista del resultado. Por ello, éste debe de ser uno de los pocos casos en los que defiendo el uso de una propiedad que no está recogida en ninguna especificación del W3C: innerHTML.

innerHTML nos permite especificar directamente el marcado interno de un elemento. El ejemplo anterior se reescribiría así:

    var elem_p = document.createElement('p');
    elem_p.innerHTML = 'Éste es un párrafo con una palabra <em>enfatizada</em> y otras aún <strong>más enfatizadas</strong>.';
            

Como digo, innerHTML no está reconocido en ningún estándar recogido en una especificación, aunque sí se lo podría considerar como un estándar de consenso, puesto que todos los navegadores actuales lo soportan.

Así, dependiendo de la situación, es bueno contar con esta pieza en el kit del scripter avezado.

Notas

1. Técnicamente podría hacerse, puesto que el DOM Core 1 ofrece el método createDocumentFragment (inglés), lo que nos permitiría crear, por ejemplo, todo el body de un documento… aunque desde el punto de vista de la accesibilidad y la usabilidad sería un movimiento suicida.