Ejercicio para añadir elementos al DOM

Añadir párrafos

En este primer caso añadimos un párrafo con el texto "Párrafo" a un contendor cada vez que pulsamos un botón

Necesitamos una función que haga 3 cosas:

  1. Obtener el innerHTML del elemento contenedor de los párrafos
  2. Actualizar el contenido con un nuevo párrafo
  3. Devolver el nuevo contenido al contenedor de párrafos

function addPar() {
    let contenido = document.getElementById('par_container').innerHTML;
    contenido = contenido + '<p>Párrafo</p>';
    document.getElementById('par_container').innerHTML = contenido;
}

Este es el contenedor de párrafos

Ejercicio para añadir elementos LI a un UL al pulsar un botón

Este es un caso idéntico al anterior. Lo único que cambia es el elemento que estamos añadiendo y el contenedor, que es este caso es un elemento UL.


function addLi() {
    let contenido = document.getElementById('listado').innerHTML;
    contenido = contenido + '<li>Elemento</li>';
    document.getElementById('listado').innerHTML = contenido;
}

    Ejercicio para añadir párrafos numerados a un contenedor

    En este caso nos basamos en el primer caso, pero además definimos una variable de tipo global (en todo el script y no solo dentro de la función para añadir los párrafos), que se encargue de llevar la cuenta de los párrafos que añadimos.

    El valor de esa variable (el número de párrafo actual) lo añadimos junto al texto del párrafo.

    
let contador = 1;
function addNumerados() {
    let contenido = document.getElementById('numerados').innerHTML;
    contenido = contenido + '<p>Párrafo número ' + contador + '</p>';
    document.getElementById('numerados').innerHTML = contenido;
    contador++;
}

    Ejercicio para añadir asistentes a un listado, escribiendo el nombre del asistente en un input

    En este caso nos basamos en el segundo ejemplo, pero ahora añadimos una instrucción para leer el valor de un input del documento que contendrá el nombre del asistente que vamos a añadir a la lista. Ese nombre es el que vamos a usar como contenido del elemento LI

    Además añadimos un botón con una segunda función para borrar todo el listado. Esto lo conseguimos estableciendo el innerHTML del contenedor como una cadena de texto vacía.

    
function addAsistente() {
    let lista = document.getElementById('asistentes').innerHTML;
    const usuario = document.getElementById('nom_asistente').value;
    lista = lista + '<li>' + usuario + '</li>';
    document.getElementById('asistentes').innerHTML = lista;
    document.getElementById('nom_asistente').value = '';
    document.getElementById('nom_asistente').focus();
}

function borraAsistentes() {
    document.getElementById('asistentes').innerHTML = '';
}