Uso del método createElement()

Crear cualquier tipo de elemento HTML desde javaScript de forma dinámica

El método del documento createElement() permite crear dentro del script cualquier tipo de nodo para su manipulación y posterior inserción en el documento.

Este método recibe un único parámetro de tipo string con el nombre de la etiqueta del elemento a crear.

Vamos a crear un nodo de tipo párrafo, que tenga como contenido la frase "Esto es un párrafo de muestra", y lo vamos a añadir al DOM.

  1. Crear el elemento con el método
  2. Añadirle la propiedad textContent
  3. Pasar el elemento al DOM

function creaParrafo() {
    const PARRAFO = document.createElement('p');
    PARRAFO.textContent = 'Este es un párrafo de prueba';
    document.getElementById('pizarra').append(PARRAFO);
}

Uso del método append() para insertar nodos dentro de otros nodos del DOM, pero también en nodos dinámicos

El método append no solo permite pasar los nodos creados de forma dinámica al DOM, sino que también nos permite añadir nodos creados de forma dinámica a otros nodos creados también en el script.

Vamos a crear de forma dinámica un div, que a su vez contendrá un título h3 y un párrafo. Cada uno de estos 3 elementos tendrá su propia clase CSS, y su contenido en el caso del título y el párrafo. Por último añadimos el div al DOM.

  1. Creo los 3 elementos llamando al método 3 veces, una para cada nodo.
  2. Defino atributos (class y contenido) para cada uno de los elementos
  3. Inserto el título y el párrafo dentro del div
  4. Paso el div al DOM

function creaFicha() {
    const FICHA = document.createElement('div');
    const TITULO = document.createElement('h3');
    const PARRAFO = document.createElement('p');
    FICHA.className = 'modelo-ficha';
    TITULO.className = 'titulo-ficha';
    PARRAFO.className = 'parrafo-ficha';
    TITULO.textContent = 'Ficha del elemento';
    PARRAFO.textContent = 'Descripción del elemento';
    FICHA.append(TITULO, PARRAFO);
    document.getElementById('fichas').append(FICHA);
}

Método setAttribute() para modificar cualquier atributo de un nodo

Con este método podemos establecer y modificar cualquier atributo de un elemento HTML desde el script. Incluso podemos definir atributos que no sean estándar del lenguaje HTML.

El método recoge 2 parámetros, el primero es el nombre del atributo que vamos a modificar, y el segundo su valor. Ambos son de tipo string.

Vamos a añadir un párrafo con formato de cuadro de mensaje en el cual aparecerá una imagen junto a un texto que sea editable por el usuario.

  1. Primero creamos 3 elementos: div, img y p
  2. Aplicar clases CSS para cada uno
  3. Definir atributo src para la imagen y contentEditable para el párrafo
  4. Pasarlo todo al DOM

function creaAlerta() {
    const MENSAJE = document.createElement('div');
    const ICONO = document.createElement('img');
    const TEXTO = document.createElement('p');
    MENSAJE.className = 'alerta';
    ICONO.className = 'icono-alerta';
    TEXTO.className = 'texto-alerta';
    TEXTO.textContent = 'Haz clic en el texto para modificarlo.';
    TEXTO.setAttribute('contentEditable', 'true');
    ICONO.setAttribute('src', 'imgs/alerta.svg');
    MENSAJE.append(ICONO, TEXTO);
    document.getElementById('mensajes').append(MENSAJE);
}

Crear elementos de forma dinámica

Un ejemplo que combina los casos anteriores con datos introducidos por el usuario

Vamos a crear mensajes de aviso donde el usuario pueda definir la imagen y el título del mensaje antes de crearlo.

  1. El proceso es similar al anterior, pero en este caso añadimos un select para insertar la imagen y un input de texto para el título

function creaMensaje() {
    const SRC = document.getElementById('sel_img').value;
    const TXT = document.querySelector('#in_titulo').value;
    const MENSAJE = document.createElement('div');
    const TITULO = document.createElement('h3');
    const IMAGEN = document.createElement('img');
    const PARRAFO = document.createElement('p');
    IMAGEN.setAttribute('src', SRC);
    TITULO.textContent = TXT;
    PARRAFO.textContent = 'Selecciona para modificar el texto';
    PARRAFO.setAttribute('contentEditable', 'true');
    MENSAJE.className = 'alerta bloque';
    IMAGEN.className = 'logo';
    MENSAJE.append(IMAGEN, TITULO, PARRAFO);
    document.querySelector('#cuadro').append(MENSAJE);
}

Eliminar elementos de forma dinámica

Vamos a usar el método remove() para eliminar los nodos seleccionados del documento

Necesitamos una función que genere un elemento select con tantos option como mensajes tengamos en el apartado anterior. Y cuando seleccionemos el mensaje desde el option podremos eliminarlo pulsando en un botón adyacente.

  1. Desde un botón ejecutamos una función que construya los elementos option del select
  2. Cada option tendrá como texto "Mensaje 1, 2,...". O el propio título del mensaje
  3. El atributo valuede cada option debe ser su número de índice
  4. Esto lo hacemos mediante createElement('option')
  5. Cuando seleccionamos un mensaje usamos su número de índice para eliminar ese elemento de su colección
  6. Cada vez que eliminemos un mensaje debemos reconstruir el select

function creaSelect() {
    let mensajes = document.getElementsByClassName('bloque');
    document.getElementById('sel_msj').innerHTML = '';
    for (let i = 0; i < mensajes.length; i++) {
        const OPT = document.createElement('option');
        OPT.textContent = 'Mensaje ' + (i + 1);
        OPT.setAttribute('value', i);
        document.getElementById('sel_msj').append(OPT);
    }
}
function borraMensaje() {
    let posicion = document.getElementById('sel_msj').value;
    let mensajes = document.getElementsByClassName('bloque');
    mensajes[posicion].remove();
    creaSelect();
}