1

Buenas tardes quería saber como concatenar un bloque html que contiene un div con listas y botones dentro al hacer click en un boton. Tengo entendido que se puede hacer con templeate strings pero no se bien como hacerlo.

scripts.js: Tengo esta variable con mi bloque de html dentro

miDiv = `<header>To do</header>
        <div class="inputField">
            <input type="text" placeholder="Add new item">
            <button><i class="fas fa-plus"></i></button>
        </div>
        <ul class="todoList">
            
            
        </ul>
        <div class="footer">
            <span>You have <span class="pendingNumb"></span> items pending</span>
            <button>Clear All</button>
        </div>`

index.html: Lo que me gustaría hacer es que al clickear en el boton con id "newList" se agregue el contenido de la variable miDiv dentro del div con class wrapper.

<div class="title">
        <h1>Add new list</h1>
        <button class="newList" id="newList">Add new To Do List</button>
    </div>
    

    <div class="wrapper">
        
        
    </div>
</div>

Cabe aclarar que el div que quiero agregar tiene funciones y lógica para agregar otros elementos dentro, entonces cuando concateno el contenedor, las demas funciones dejan de funcionarme como por ejemplo la siguiente:

scrip.js:

function showTask(){
    let getLocalStorage = localStorage.getItem("New Todo");
    if(getLocalStorage == null){
        listArr = [];

    } else {
        listArr = JSON.parse(getLocalStorage); //Transformar un json string en un objeto de js
    }
    const pendingNumb = document.querySelector(".pendingNumb");
    
    pendingNumb.textContent = listArr.length;
    
    if (listArr.length > 0){
        deleteAllBtn.classList.add("active");
    } else {
        deleteAllBtn.classList.remove("active");
    }

    let newLiTag = '';
    listArr.forEach((element, index) =>{
        newLiTag += `<li> ${element} <span onclick="deleteTask((${index}))";><i class="fas fa-trash"></i></span></li>`; //Concateno un li a la lista
    });
    todoList.innerHTML = newLiTag;
    inputBox.value = ''; //Reseteo el texto que le pase al To do
}

Esta función lo que hace es agregar tareas al to do list y funciona perfectamente, pero si concateno el div del principio, estas funciones dejan de funcionar.

10
  • para agregar un template-string a un elemento se unsa elemento.innerHTML = template
    – Christian
    el 18 may. 2021 a las 20:51
  • Esto ya te lo respondí aquí
    – Christian
    el 18 may. 2021 a las 20:52
  • ¿Responde esto a tu pregunta? Como generar otro contenedor al hacer click en un boton
    – Christian
    el 18 may. 2021 a las 20:53
  • @Christian si y me fue de gran ayuda, me había olvidado de editar esta pregunta para que puedan entender el inconveniente que estoy teniendo.
    – MateoG98
    el 18 may. 2021 a las 20:58
  • 1
    para que tu pregunta se entienda mejor, añade un enlace a la pregunta anterior, esto para tenga un contexto mas claro
    – Christian
    el 18 may. 2021 a las 21:02

1 respuesta 1

0

Para colocar el código de tu variable miDiv, lo primero sería identificar en donde lo quieres colocar. Como mencionas, lo quieres colocar en el interior de tu div class="wrapper". Para ello, vamos a añadirle un atributo id a ese div:

div class="wrapper" id="colocarDentro"

Además también tendrás que asignarle un id a tu boton, para que posteriormente en nuestro javascript podamos identificarlo:

<button id="miBoton">Anyadir</button>

Posteriormente, en el código JavaScript deberás obtener dicho div. Para ello explicaremos lo siguiente:

document.getElementById(): Nos permite obtener una etiqueta de nuestro html.

innerHTML: Nos permite acceder al contenido HTML que tiene dentro.

Recordando que a cada elemento le asignaste un id, en nuestro javaScript tendremos el siguiente código:

let elBoton = document.getElementById('miBoton');

elBoton.onclick = function(){
    let elDvi = document.getElementById('colocarDentro');
    let contenido = "<b>Hola gente</b>";
    elDvi.innerHTML = elDvi.innerHTML + contenido;
}

Lo primero que haremos será identificar ese botón con el uso de document.getElementById(). A esa variable le asignaremos un evento onclick, esto quiere decir, cuando el usuario seleccione el botón se ejecutará el código en su interior.

El código del interior obtendrá el div al cual quieras añadirte un contenido. Luego, en mi caso, he creado una variable contenido (pero tu usaras tu variable miDiv). Por último concatenamos todo el html que ya había dentro del div y le asignamos de nuevo mas codigo HTML con uso de innerHTML

Edit: Recuerda añadir ese archivo javascript de esta forma:

<script src="./ELARCHIVO.js" defer></script>

Tienes que esperar a que el html cargue completamente o sino no encontrará las etiquetas htmml, por eso hago uso del defer. Otra opción es colocar esta etiqueta al final del body.

1
  • 1
    no creo que sea la solucion, ya que la pregunta dice que al crear un nuevo elemento sus funciones y/o eventos ya no le funcionan, y esto es debido a que los selecciona con un querySelector() lo que devuelve un HTMLCollection el cual tendra que recorrer. Puedes hacer una mejor respuesta en base a lo que dije, de lo contrario lo hare yopi. :)
    – Christian
    el 21 may. 2021 a las 2:22

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.