nested div classes with javascript-CodePudding

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 >
    <h1>Titles</h1>
    <h2>Desc</h2>
    <input id="search-bar" type="text" placeholder="Enter">
    <button id="search-btn" onclick="requested()">Search</button>
    <div >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);
}

}

CodePudding user response：

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);
  }
}

CodePudding user response：

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 >
      <h1>Titles</h1>
      <h2>Desc</h2>
      <input id="search-bar" type="text" placeholder="Enter">
      <button id="search-btn" onclick="requested()">Search</button>
      <div >My Galaxy</div>
      <div id="container1" style="font-weight:bold;background-color:red">Container: </div>
  </div>
</body>