Manipulación del DOM - Listados&Enlaces

    <h2>Listado de Enlaces</h2>
    <button id="iniciar-button" onclick="iniciarAdicion()">Add-Link</button>
    <input type="text" id="enlace-input" style="display: none;" placeholder="Introduce un enlace">
    <input type="text" id="texto-input" style="display: none;" placeholder="Introduce el texto del enlace">
    <button id="agregar-button" onclick="agregarEnlace()" style="display: none;">Agregar</button>
    <button id="eliminar-button" onclick="eliminarUltimoEnlace()" style="display: none;">Eliminar</button>
    <button id="finalizar-button" onclick="finalizarAdicion()" style="display: none;">Finalizar</button>

    <ul id="enlaces-list">
    </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-input").style.display = "inline-block";
            document.getElementById("texto-input").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-input").style.display = "none";
            document.getElementById("texto-input").style.display = "none";
            document.getElementById("agregar-button").style.display = "none";
            document.getElementById("eliminar-button").style.display = "none";
        }

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

            var enlaceInput = document.getElementById("enlace-input");
            var textoInput = document.getElementById("texto-input");
            var enlaceUrl = enlaceInput.value;
            var enlaceTexto = textoInput.value;

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

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

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

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

    <h2>Listado de Enlaces - CRUD</h2>
    <button id="iniciar-button4" onclick="iniciarAdicion4()">Add-Link</button>
    <input type="text" id="enlace-input4" style="display: none;" placeholder="Introduce un enlace">
    <input type="text" id="texto-input4" style="display: none;" placeholder="Introduce el texto del enlace">
    <button id="agregar-button4" onclick="agregarEnlace4()" style="display: none;">Agregar</button>
    <button id="eliminar-button4" onclick="eliminarUltimoEnlace4()" style="display: none;">Eliminar</button>
    <button id="finalizar-button4" onclick="finalizarAdicion4()" style="display: none;">Finalizar</button>

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

<script>
        var adicionar = false;

        function iniciarAdicion4() {
            adicionar = true;

            document.getElementById("finalizar-button4").style.display = "inline-block";
            document.getElementById("iniciar-button4").style.display = "none";
            document.getElementById("enlace-input4").style.display = "inline-block";
            document.getElementById("texto-input4").style.display = "inline-block";
            document.getElementById("agregar-button4").style.display = "inline-block";
            document.getElementById("eliminar-button4").style.display = "inline-block";
        }

        function finalizarAdicion4() {
            adicionar = false;
            document.getElementById("finalizar-button4").style.display = "none";
            document.getElementById("iniciar-button4").style.display = "inline-block";
            document.getElementById("enlace-input4").style.display = "none";
            document.getElementById("texto-input4").style.display = "none";
            document.getElementById("agregar-button4").style.display = "none";
            document.getElementById("eliminar-button4").style.display = "none";
        }

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

            var enlaceInput = document.getElementById("enlace-input4");
            var textoInput = document.getElementById("texto-input4");
            var enlaceUrl = enlaceInput.value;
            var enlaceTexto = textoInput.value;

            if (enlaceUrl !== "" && enlaceTexto !== "") {
                var enlacesList = document.getElementById("enlaces-list4");
                var nuevoEnlace = document.createElement("li");
                
                // Crear un enlace (<a>) con su texto y URL
                var enlace = document.createElement("a");
                enlace.href = enlaceUrl;
                enlace.textContent = enlaceTexto;

                // Crear botón de borrar
                var botonBorrar = document.createElement("button4");
                botonBorrar.textContent = "Borrar";
                botonBorrar.addEventListener("click", function() {
                    enlacesList.removeChild(nuevoEnlace);
                });

                // Crear botón de editar
                var botonEditar = document.createElement("button4");
                botonEditar.textContent = "Editar";
                botonEditar.addEventListener("click", function() {
                    var nuevoTexto = prompt("Editar texto del enlace:", enlaceTexto);
                    if (nuevoTexto !== null) {
                        enlace.textContent = nuevoTexto;
                    }
                    var nuevaUrl = prompt("Editar URL del enlace:", enlaceUrl);
                    if (nuevaUrl !== null) {
                        enlace.href = nuevaUrl;
                    }
                });

                // Agregar enlace y botones al elemento de lista
                nuevoEnlace.appendChild(enlace);
                nuevoEnlace.appendChild(botonBorrar);
                nuevoEnlace.appendChild(botonEditar);

                enlacesList.appendChild(nuevoEnlace);

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

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

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