Necesito ayuda para crear un div que cuando haces clic en un botón, se crea el div con HTML personalizado dentro.
<html> <link rel="stylesheet" href="style.css"> <script type="text/javascript"> var template = ` <div class="block"> Hello World! </div> ` function createBlock() { } </script> <button onclick="createBlock()">Create div</button> </html>Si esto es posible (lo más probable es que lo sea), estoy creando un apartado de correos.
¡¡¡Gracias!!!
¿Estás buscando algo como esto?
var template = ` <div class="block"> Hello World! </div> ` function createBlock() { let myDiv = document.createElement('div'); document.body.append(myDiv); myDiv.outerHTML = template; } .block{ background: red } <html> <link rel="stylesheet" href="style.css"> <button onclick="createBlock()">Create div</button> </html> Si desea colocar su plantilla como un niño dentro de un nuevo div, puede cambiar su createBlock de esta manera:
function createBlock() { let myDiv = document.createElement('div'); myDiv.innerHTML= template; document.body.append(myDiv); }En lugar de crear un elemento, una mejor manera de hacerlo (con el mismo efecto) es ocultar y luego mostrar el elemento, así:
#block { display: none; } <!DOCTYPE html> <html> <head> </head> <body> <link rel="stylesheet" href="style.css"> <button onclick="createBlock()">Create div</button> <div id="block"> Hello World! </div> <script type="text/javascript"> function createBlock() { block = document.getElementById("block") block.style.display = "block" } </script> </body> </html>