I need some help with nested classes with javascript. I made image, title, date and btn classes but I need a container that can cover these divs. I use createElement and setAttribute to make these divs but I have no idea how can I make a container with createElement with javascript. Thank you.
<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);
}
}
I suppose you just need to create the container first, then append everything inside it. I will assume you want a separate container for each set of data, something like:
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);
}
}
As stated by @Kinglish , the page can already come with a container that you append to using JavaScript, or you can create that container by appending it to document:
You do this by calling JavaScript div functions on an element selected y id (container) rather than 'document' directly.
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>