Necesito ayuda con las clases anidadas con javascript. Hice clases de imagen, título, fecha y btn, pero necesito un contenedor que pueda cubrir estos divs. Uso createElement y setAttribute para hacer estos divs pero no tengo idea de cómo puedo hacer un contenedor con createElement con javascript. Gracias.
<body> <div class="header"> <h1>Titles</h1> <h2>Desc</h2> <input id="search-bar" type="text" placeholder="Enter"> <button id="search-btn" onclick="requested()">Search</button> <div class="my-galaxy">My Galaxy</div> </div> </div> </div> function loaded() { for (let i = 0; i < MAX_PAGE; i++) { const img = document.createElement('div'); img.setAttribute("class", "image"); document.body.appendChild(img); const title = document.createElement('div'); title.setAttribute("class", "title"); document.body.appendChild(title); const date = document.createElement('div'); date.setAttribute("class", "date"); document.body.appendChild(date); const btn = document.createElement('button'); btn.setAttribute("id", "btn"); document.body.appendChild(btn); }}
Supongo que primero solo necesita crear el contenedor y luego agregar todo lo que contiene. Asumiré que desea un contenedor separado para cada conjunto de datos, algo como:
function loaded() { for (let i = 0; i < MAX_PAGE; i++) { const container = document.createElement('div'); container.classList.add('container'); document.body.appendChild(container); const img = document.createElement('div'); img.setAttribute("class", "image"); container.appendChild(img); const title = document.createElement('div'); title.setAttribute("class", "title"); container.appendChild(title); const date = document.createElement('div'); date.setAttribute("class", "date"); container.appendChild(date); const btn = document.createElement('button'); btn.setAttribute("id", "btn"); container.appendChild(btn); } }Como lo indica @Kinglish, la página ya puede venir con un container que se agrega al usar JavaScript, o puede crear ese contenedor agregándolo al documento:
Para ello, llama a las funciones div de JavaScript en un elemento seleccionado y id (contenedor) en lugar de 'documento' directamente.
function loaded() { //set Constants var MAX_PAGE =5; var color=['red','yellow','green','blue','orange']; //Get refrence to the exsisting container object var baseContainer1 = document.getElementById('container1'); //Create a new container object var baseContainer = document.createElement('div'); document.body.appendChild(baseContainer); baseContainer.id="container"; baseContainer.style.backgroundColor='green'; baseContainer.innerHTML="Dynamic Container:\n"; //Add elements to container object. For each child Element, create a new container element for that 'loop' in the for loop for (let i = 0; i < MAX_PAGE; i++) { var container = document.createElement('div'); container.innerHTML='innerContainer(made dynamically):\n' container.id=("innerContainer"+i); container.style.fontWeight='bold'; container.style.backgroundColor=color[i]; container.style.border='1px black solid'; container.style.margin='3px'; const img = document.createElement('div'); img.setAttribute("class", "image"); img.innerHTML= 'img\n'; container.appendChild(img); const title = document.createElement('div'); title.setAttribute("class", "title"); title.innerHTML= 'title\n'; container.appendChild(title); const date = document.createElement('div'); date.setAttribute("class", "date"); date.innerHTML= 'date\n'; container.appendChild(date); const btn = document.createElement('button'); btn.setAttribute("id", "btn"); btn.innerHTML= 'btn\n'; container.appendChild(btn); baseContainer.appendChild(container.cloneNode(true)); //Use clone node as created element can't be used twice at once); baseContainer1.appendChild(container.cloneNode(true)); //Use clone node as created element can't be used twice at once); } } loaded(); <body> <div class="header"> <h1>Titles</h1> <h2>Desc</h2> <input id="search-bar" type="text" placeholder="Enter"> <button id="search-btn" onclick="requested()">Search</button> <div class="my-galaxy">My Galaxy</div> <div id="container1" style="font-weight:bold;background-color:red">Container: </div> </div> </body>