Tengo el siguiente <div> que he creado usando HTML y CSS. No quiero que se creen estos divs cuando se carga la página, sino que me gustaría que se crearan solo cuando se ejecuta una función de JavaScript.
Preferiría que fueran creados por la función, si es posible, en lugar de estar ocultos/no ocultos
¿Hay alguna manera de que pueda agregar este código HTML exacto dentro de la función, o tendré que usar JavaScript para crear estos divs? Si necesito usar JavaScript, ¿alguien podría explicar cómo?
<div class = 'rowcontainer' id = "r<?php echo $studentid ?>" > <div class = 'name'><t><?php echo $firstname," ",$lastname; ?></t></div> <div class = 'ako'><t><?php echo $ako; ?></t></div> <div class = 'select'> <input type = 'checkbox' class = 'checkbox move'> </div> </div> .rowcontainer { width: 100%; height: 30px; } .name { line-height: 30px; float: left; width: 60%; height: 100%; padding-left: 15px } .ako { line-height: 30px; text-align: center; float: left; width: 20%; height: 100%; } .select { line-height: 30px; text-align: center; float: right; width: 15%; height: 100%; } .checkbox { height: 17px; width: 17px; margin: auto; margin-top: 6px; }Gracias por todas las respuestas, pero desafortunadamente parece que no puedo hacer que esto funcione. Cuando creo un nuevo documento con el siguiente código, todo lo que aparece es una ventana en blanco y el siguiente error. Error 1 (nueva página) Además, cuando intento agregar este código a mi página existente, aparece un error similar y nada cambia en la página. Error 2 (página existente) ¿Qué me estoy perdiendo?
<body> <script> let div = document.createElement("div"); div.id = "div_id" ; div.className = "div_class"; div.style = "background-color: red;"; div.style.width = "100px"; div.style.height = "100px"; document.appendChild("div"); </script> </body>Puede crear divs dinámicamente usando JavaScript. usando document.createElement para hacerlo:
https://developer.mozilla.org/en-US/docs/Web/API/Document/createElement
Pero no es suficiente para su código.
Los divs se representan en una computadora cliente. El navegador sabe leer un archivo html y dibujar la interfaz de usuario en su pantalla. Php es un lenguaje de servidor. Entonces, cuando mezcla php y html, el servidor procesa el código en un templete html para que el cliente obtenga solo html. El cliente no tiene idea de qué hacer con un código php.
Ocultar divs es algo que el cliente debe hacer.
Así que creo que el mejor enfoque es separar el código del cliente y el código del servidor. Para hacer eso, el cliente necesita obtener los datos que necesita de su servidor php y luego crear las inmersiones dinámicamente.
Otra opción, relevante solo si desea crear los divs una vez. Me refiero a no eliminar y crear los divs más de una vez. Es dejar que el servidor php cree esos div al comando
Hay un método en javascript que te permite crear un div, el comando es document.createElement
También puede ajustar sus propiedades según sus necesidades.
Aquí está el código si solo desea crear un div:
document.createElement("div");Pero si desea ajustar sus propiedades, como su ID, este debería ser su código:
let new_div = document.createElement("div"); div.id = "ID";El error se debe a una mala implementación del método appendChild() . Está pasando el argumento como una cadena: document.appendChild("div") en lugar del elemento creado .appendChild(div) . Además, debe especificar a qué etiqueta le gustaría agregar. En este caso estoy usando la etiqueta <body> :
document.body.appendChild(div)Pruebe el siguiente fragmento:
let btn = document.getElementById('btnID'); btn.addEventListener('click', (e) => { let div = document.createElement("div"); div.id = "div_id" ; div.className = "div_class"; div.style = "background-color: red;"; div.style.width = "100px"; div.style.height = "100px"; document.body.appendChild(div); }); <button id="btnID" style="margin:10px">Create Div</button>