Ejemplos de manipulación del DOM con JS

INICIO

1.Crear y eliminar elementos de un listado

CODE

    <h1>Lista de Elementos</h1>
  
    <input type="text" id="nuevoElemento" placeholder="Introduce un elemento">
    <button id="agregar">Agregar Elemento</button>
    <button id="borrar">Borrar Último Elemento</button>
<ul id="lista"></ul>
    <script>
        // Obtener referencias a los elementos
        const lista = document.getElementById("lista");
        const inputElemento = document.getElementById("nuevoElemento");
        const botonAgregar = document.getElementById("agregar");
        const botonBorrar = document.getElementById("borrar");

        // Contador para asignar IDs únicos a los elementos
        let contador = 1;

        // Función para agregar un nuevo elemento a la lista
        function agregarElemento() {
            const valorElemento = inputElemento.value;
            if (valorElemento.trim() !== "") {
                const nuevoElemento = document.createElement("li");
                nuevoElemento.textContent = valorElemento;
                nuevoElemento.id = "elemento" + contador;
                lista.appendChild(nuevoElemento);
                inputElemento.value = "";
                contador++;
            }
        }

        // Función para borrar el último elemento de la lista
        function borrarUltimoElemento() {
            if (contador > 1) {
                const ultimoElemento = document.getElementById("elemento" + (contador - 1));
                lista.removeChild(ultimoElemento);
                contador--;
            }
        }

        // Agregar event listeners a los botones
        botonAgregar.addEventListener("click", agregarElemento);
        botonBorrar.addEventListener("click", borrarUltimoElemento);
    </script>

2.Agregar enlaces en los listados


CODE

 <h1>Listado de Enlaces</h1>    
    <label for="enlace-input">Introduce un enlace:</label>
    <input type="text" id="enlace-input">
    <button onclick="agregarEnlace()">Agregar Enlace</button>
    <ul id="enlaces-list">
    </ul>

    <script>
        function agregarEnlace() {
            var enlaceInput = document.getElementById("enlace-input");
            var enlaceUrl = enlaceInput.value;

            if (enlaceUrl != "") {
                var enlacesList = document.getElementById("enlaces-list");
                var nuevoEnlace = document.createElement("li");
                nuevoEnlace.innerHTML = '<a href="' + enlaceUrl + '" target="_blank">' + enlaceUrl + '</a>';
                enlacesList.appendChild(nuevoEnlace);

                // Limpiar el input después de agregar el enlace
                enlaceInput.value = "";
            }
        }
    </script>

3.Agregar-Eliminar enlaces de un listado 1


CODE

<h1>Listado de Enlaces</h1>    
    <label for="enlace-input1">Introduce un enlace:</label>
    <input type="text" id="enlace-input1">
    <button onclick="agregarEnlace1()">Agregar Enlace</button>
    <button onclick="eliminarUltimoEnlace()">Eliminar Último Enlace</button>

    <ul id="enlaces-list1">
    </ul>

    <script>
        function agregarEnlace1() {
            var enlaceInput = document.getElementById("enlace-input1");
            var enlaceUrl = enlaceInput.value;

            if (enlaceUrl !== "") {
                var enlacesList = document.getElementById("enlaces-list1");
                var nuevoEnlace = document.createElement("li");
                nuevoEnlace.innerHTML = '<a href="' + enlaceUrl + '" target="_blank">' + enlaceUrl + '</a>';
                enlacesList.appendChild(nuevoEnlace);

                // Limpiar el input después de agregar el enlace
                enlaceInput.value = "";
            }
        }

        function eliminarUltimoEnlace() {
            var enlacesList = document.getElementById("enlaces-list1");
            var listaEnlaces = enlacesList.getElementsByTagName("li");

            if (listaEnlaces.length > 0) {
                enlacesList.removeChild(listaEnlaces[listaEnlaces.length - 1]);
            }
        }
    </script>

4.Agregar-Eliminar enlaces de un listado 2


CODE

<h1>Listado de Enlaces</h1>
<section>    
    <button id="iniciar-button" onclick="iniciarAdicion()">Add-Link</button>
    <input type="text" id="enlace-input2" style="display: none; " placeholder="Introduce un enlace">
    <button id="agregar-button" onclick="agregarEnlace2()" style="display: none;">Agregar</button>
    <button id="eliminar-button" onclick="eliminarUltimoEnlace4()" style="display: none;">Eliminar</button>
    <button id="finalizar-button" onclick="finalizarAdicion()" style="display: none;">Finalizar</button>

    <ul id="enlaces-list2">
    </ul>

    <script>
        var adicionar = false;

        function iniciarAdicion() {
            adicionar = true;
            
            document.getElementById("finalizar-button").style.display = "inline-block";
            document.getElementById("iniciar-button").style.display = "none";
            document.getElementById("enlace-input2").style.display = "inline-block";
            document.getElementById("agregar-button").style.display = "inline-block";
            document.getElementById("eliminar-button").style.display = "inline-block";
            
        }

        function finalizarAdicion() {
            adicionar = false;
            document.getElementById("finalizar-button").style.display = "none";
            document.getElementById("iniciar-button").style.display = "inline-block";
            document.getElementById("enlace-input2").style.display = "none";
            document.getElementById("agregar-button").style.display = "none";
            document.getElementById("eliminar-button").style.display = "none";
            document.getElementsByTagName("label")[0].style.display = "none";
        }

        function agregarEnlace2() {
            if (!adicionar) return;

            var enlaceInput = document.getElementById("enlace-input2");
            var enlaceUrl = enlaceInput.value;

            if (enlaceUrl !== "") {
                var enlacesList = document.getElementById("enlaces-list2");
                var nuevoEnlace = document.createElement("li");
                nuevoEnlace.innerHTML = '<a href="' + enlaceUrl + '" target="_blank">' + enlaceUrl + '</a>';
                enlacesList.appendChild(nuevoEnlace);

                // Limpiar el input después de agregar el enlace
                enlaceInput.value = "";
            }
        }

        function eliminarUltimoEnlace4() {
            var enlacesList = document.getElementById("enlaces-list2");
            var listaEnlaces = enlacesList.getElementsByTagName("li");

            if (listaEnlaces.length > 0) {
                enlacesList.removeChild(listaEnlaces[listaEnlaces.length - 1]);
            }
        }
    </script>