Tengo un ciclo de elementos de botón que se emiten con un ciclo while de los datos llamados desde una base de datos MySQL a través de PHP.
Un usuario puede agregar un botón a esta lista y quiero agregar el nuevo botón y su HTML asociado usando el método prepend() en el elemento principal, para que aparezca en la parte superior de la lista.
Sé cómo hacer esto en varias etapas usando createElement y agregando nombres de clases y nombres de atributos, pero me preguntaba si hay una forma más simple de hacerlo usando una plantilla literal del HTML requerido.
He visto muchos ejemplos usando parentElement.innerHTML(variableName), donde variableName es el literal de la plantilla, pero estos elementos de botón que se ilustran a continuación están dentro de un bucle, y quiero que anteponga el botón recién creado al elemento principal .board-list se muestra en el HTML.
Cuando se envía un nuevo nombre de tablero, se produce una solicitud de publicación fetch() en segundo plano para actualizar la base de datos, pero necesito crear un nuevo elemento con JavaScript para que esto se muestre instantáneamente al usuario.
En este momento, la plantilla literal newButton se agrega al HTML dentro de las comillas como una cadena de texto, no como elementos HTML DOM.
JavaScript
// added into the template literal below const newBoardName = document.querySelector('.input-title').value; const newButton = ` <button class="board-list-item full-width" name="board-name" type="submit"> <span>${newBoardName}</span> <span class="add-icon flex">+</span> </button> ` document.querySelector(".board-list").prepend(newButton);HTML
<div class="board-list"> // buttons outputted from the database appear here </div> <form> <input class="input-title"> <button name="new-board-name">New Board Name</button> <form>Creo que una solución simple es usar .innerHTML , aquí hay un ejemplo:
// added into the template literal below const newBoardName = document.querySelector('.input-title').value; const newButton = ` <button class="board-list-item full-width" name="board-name" type="submit"> <span>${newBoardName}</span> <span class="add-icon flex">+</span> </button> ` let boardList = document.querySelector(".board-list"); boardList.innerHTML = newButton + boardList.innerHTML; <div class="board-list"> // buttons outputted from the database appear here </div> <form> <input class="input-title" value="user1"> <button name="new-board-name">New Board Name</button> <form>Esto es simplemente para responder a tu pregunta, aunque no es la mejor solución, por lo que no la veo recomendable.
La solución a esto fue usar el método insertAdjacentHTML . La pregunta/respuesta dada en uno de los comentarios me ayudó con esto, pero no creo que sea una pregunta duplicada, y la pregunta vinculada tiene una respuesta demasiado complicada en mi humilde opinión.
// added into the template literal below const newBoardName = document.querySelector('.input-title').value const newButton = ` <button class="board-list-item full-width" name="board-name" type="submit"> <span>${newBoardName}</span> <span class="add-icon flex">+</span> </button> ` // insert using 'afterbegin' to add as the first child element document.querySelector(".board-list").insertAdjacentHTML('afterbegin', newButton)