0

Puede que el título no sea muy descriptivo porque honestamente no estoy muy seguro de cual sea la solución, pero les expongo mi problema. Resulta que tengo en un archivo html una grid donde en cada uno de los div que componen esta, guardo datos; por otro lado necesito que el número de cuadros pueda aumentar, es decir que el usuario pueda crear más div, y para ello los creo desde java con create element(), el problema radica en que al meter estos div creados desde java con *document.body.appendChild()*no los ingresa dentro del div que ya cree, y por ende no sigue el patrón, si no que se crea fuera de este.

Aquí el codigo html

<body> <div class="principal">  <div class="b"> 
<div class="b2">b2 </div>
 <div class="b3">b3 </div>
 <div class="b4">b4</div>
 <div class="b5">b5 </div>
<div class="b6">b6 </div> </div>    

Código java

var div = document.createElement("div");
var b = document.getElementsByClassName("b");
div.setAttribute("style", "height:30%; width:35%; font-size:20px; padding-left:15px; padding-top:10px; margin-top: 10px; margin-left:10px; margin-right:10px; border-top-left-radius: 10px 10px; border-top-right-radius:10px 10px; background-color: #000; margin-top:10px; position:absolute;");
document.body.appendChild(div);

Bueno, corto múltiples líneas de código, incluyendo el css debido a que se haría muy largo, pero para hacer una idea, busco poder generar bloques como por ejemplo amazon, cada vez que alguien publica un producto, generan un nuevo bloque que sigue el orden, el problema es que no se como meterlo dentro del div principal. Espero haberme dado a entender, muchas gracias por su servicio!.

0

1 respuesta 1

1

espero que estes bien, estuve viendo tu codigo y me di cuenta que quizas tu problema ocurre porque insertas un elemento "div" no dentro de tu contenedor si no dentro del body de todo el documento HTML. lo que deberias hacer es seleccionar ese elemento mediante el metodo getElementById y luego tambien crear un boton que tambien sea accedido y guardado en una variable para que este tenga un eventlistener que llame a un callback para agregar un nuevo div cada vez que se dispara la funcion.

//accede a los elementos (podrias cambiar a id en vez de class)
const principal = document.getElementById('principal');
const button = document.getElementById('button');

var div = document.createElement("div");
var b = document.getElementsByClassName("b");
div.setAttribute("style", "height:30%; width:35%; font-size:20px; padding-left:15px; padding-top:10px; margin-top: 10px; margin-left:10px; margin-right:10px; border-top-left-radius: 10px 10px; border-top-right-radius:10px 10px; background-color: #000; margin-top:10px; position:absolute;");
principal.body.appendChild(div);

Hice un pequeño ejemplo como agregaria un texto dentro de un div (como ejemplo)

const button = document.getElementById('button');


const addMore = () => {
  console.log('clicked!!');
  const container = document.getElementById('main-container');
  var h = document.createElement("H1");
  var t = document.createTextNode('text'); 
  h.appendChild(t); 
  container.appendChild(h);
}


button.addEventListener('click', addMore)
#main-container {
  background: red;
  height: 250px;
  width: 250px;
}
<button id="button">
  Add more divs
</button>

<h3>
Aqui aparecen los textos!
</h3>
<div id="main-container">

</div>

1
  • 1
    Buenas noches, gracias por responder con tal inmediatez. Resulta que al cabo del tiempo lo logre solucionar, pero de todos modos me llamo la atención la solución; lo que hice fue simplemente crear un span con un id, esto se me había ocurrido antes, lo raro está en que la solución que propones sobre obtener la etiqueta con (getElementByid) era lo que me causaba problemas; por alguna razón, al obtener el valor de una etiqueta con este método, el resultado es (null), entonces solo tuve que poner el id de la etiqueta span seguido de (.appendChild) y funcionó perfecto, honestamente no se porque
    – Adrián21
    Commented el 20 oct. 2020 a las 1:46

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.