title: How can I create HTML tags using Javascript?
body: <p>I have this code that I want to create using JavaScript since I will be using it in more than one file.
  I thought about using :after with CSS but it didn't work.
  Then I thought about using the DOM manipulation to create the HTML tags but I couldn't get it done.</p>
  <p>can anyone help me?</p>
  <p>The image below illustrate what I am trying to accomplish</p>
  <ol>
  <li>the main div tag</li>
  <li>the div tag inside main div tag</li>
  <li>the div tags I want to create using JavaScript</li>
  </ol>
  <p><a href="https://i.stack.imgur.com/LCL5V.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/LCL5V.png" alt="enter image description here" /></a></p>
  <p>Thanks in advance,</p>
  <p>Thanks everybody for the help. Here is what I got from your response</p>
  <pre><code>//CREATE MENU DIVs
  
      const mainbody = document.querySelector('body') //or target div
  
      const divbtn = document.createElement('div');
      divbtn.setAttribute('id','btn');
  
      const img = document.createElement('img');
      img.setAttribute('src', 'https://thiagoprado.com/demo/learning/overlay-menu.png');
      img.setAttribute('id','menu');
      img.style.display = &quot;block&quot;;
  
      const img2 = document.createElement('img');
      img2.setAttribute('src', 'https://thiagoprado.com/demo/learning/close-menu.png');
      img2.setAttribute('id','x');
      img2.style.display = &quot;none&quot;;
  
      divbtn.appendChild(img);
      divbtn.appendChild(img2);
      //canvasDIV.appendChild(div);
      document.getElementById(&quot;c2canvasdiv&quot;).appendChild(divbtn);
  
  
      // second main DIV
  
      const divbox = document.createElement('div');
      divbox.setAttribute('id','box');
  
      const divItems = document.createElement('div');
      divItems.setAttribute('id','items');
  
      const divItem = document.createElement('div');
      divItem.setAttribute('class','item');
  
      const divItem2 = document.createElement('div');
      divItem2.setAttribute('class','item');
      //divItem2.setAttribute('id','item2');
  
      const link1 = document.createElement('a');
      link1.setAttribute('href','https://thiagoprado.com/demo/learning/');
  
      const img3 = document.createElement('img');
      img3.setAttribute('src', 'https://thiagoprado.com/demo/learning/home-60x60.png');
  
  
      const link2 = document.createElement('a');
      link2.setAttribute('href','#');
  
      const img4 = document.createElement('img');
      img4.setAttribute('src', 'https://thiagoprado.com/demo/learning/logo-60x60.png');
  
      divbox.appendChild(divItems);
      divItems.appendChild(divItem);
      divItem.appendChild(link1);
      link1.appendChild(img3);
  
      divItems.appendChild(divItem2);
      divItem2.appendChild(link2);
      link2.appendChild(img4);        
  
      document.getElementById(&quot;c2canvasdiv&quot;).appendChild(divbox);
  </code></pre>