0
154
VistasCómo generar un nuevo elemento HTML cada vez que se llama a una función JS
He estado trabajando en una aplicación web que usa Steam para iniciar sesión a través del pasaporte y las sesiones. Últimamente he tenido problemas para encontrar un buen método para crear html persistente en la página. Déjame explicarte, aquí está mi index.ejs:
<!DOCTYPE html> <html lang="en"> <%- include('partials/navbar') %> <body> <section id="chat"></section> <section id="main" style="flexcol center" class="flexcol"> <button id="newMatch">Create new match</button> <div class="match"></div> </section> </body> <script src=".././scripts/jquery.js"></script> <script src=".././scripts/script.js"></script> </html> Intenté crear una función js que inserte un nuevo <div class="match"></div> cada vez que se llama, pero no tuve éxito. Aquí está el código:
//CONTENT GENERATOR let main = document.querySelector('#main'); let matchDiv = document.createElement('div'); let matchDivText = document.createElement('h3'); function createMatch(){ $(matchDivText).append('New match').appendTo($(matchDiv)); $(matchDiv).addClass('match flex center').appendTo(main); }; $('button').click(() => { createMatch(); });Por ahora, mi función no funciona realmente a la perfección. Crea un nuevo DIV, agrega h2 y agrega la clase, pero si se llama varias veces, se ve así (se llama 3 veces):
Mi pregunta es: ¿Cómo puedo hacer que la función cree un nuevo DIV cada vez y también cómo puedo hacer que estos DIV no desaparezcan después de actualizar?
1 Respuestas
Responde la pregunta0
El problema es que las variables no están en la función, haz esto:
function createMatch () { let main = document.querySelector('#main'); let matchDiv = document.createElement('div'); let matchDivText = document.createElement('h3'); $(matchDivText).append('New match').appendTo($(matchDiv)); $(matchDiv).addClass('match flex center').appendTo(main); }; $('button').click(() => { createMatch(); });