title: How to create nested elements in JavaScript?
body: <p>Here's my HTML. I target to create elements in Javascript and insert it into div with the class "wrap" but didn't succeed. </p>
  
  <pre><code>&lt;div class="wrap"&gt;
   &lt;div class="shelf"&gt;
     &lt;div class="shelf-background"&gt;
       &lt;div class="base"&gt;
       &lt;/div&gt;
     &lt;/div&gt;
   &lt;/div&gt;
  &lt;/div&gt;
  
  
     var base = document.createElement('div');
     var shelfBackground = document.createElement('div');
     var wrap = document.querySelector(".wrap");
     var shelf = document.createElement('div');
     shelfBackground.className = "shelf-background";
     base.className = "base";
     shelf.className = "shelf";
  
     shelfBackground.appendChild(base);
     wrap.append(shelf, shelfBackground, shelfBackground.appendChild(base));
  </code></pre>
  
  <p>I get </p>
  
  <pre><code>   &lt;div class="wrap"&gt;
       &lt;div class="shelf"&gt;&lt;/div&gt;
          &lt;div class="shelf-background"&gt;&lt;/div&gt;
       &lt;div class="base"&gt;&lt;/div&gt;
     &lt;/div&gt;
  </code></pre>