How to move existing div elements into newly created div element

June 15, 2023

I am trying to move existing div elements into a new div element I created using JavaScript when the clientWidth is 600px.

From this

<div class="navbar">
    <div class="logo">
         <h2>Logo</h2>
     </div>
     <div class="burger">
          <div class="line-1"></div>
          <div class="line-2"></div>
          <div class="line-3"></div>
     </div>
     <div class="nav-items">
          <ul>
             <li><a href="#">Home</a></li>
             <li><a href="#">About</a></li>
             <li><a href="#">FAQS</a></li>
          </ul>
     </div>
     <div class="action-btn">
          <button>hire me</button>
     </div>
</div>

To this

<div class="navbar">
    <div class="logo">
         <h2>Logo</h2>
     </div>
     <div class="burger">
          <div class="line-1"></div>
          <div class="line-2"></div>
          <div class="line-3"></div>
     </div>
     <div class="navgroup">
         <div class="nav-items">
             <ul>
                  <li><a href="#">Home</a></li>
                  <li><a href="#">About</a></li>
                  <li><a href="#">FAQS</a></li>
                  </ul>
         </div>
         <div class="action-btn">
              <button>hire me</button>
         </div>
     </div>
</div>

Here is my code.

let burger = document.querySelector('burger');
let navItems = document.querySelector('nav-items');
let btn = document.querySelector('action-btn');
let navbar = document.querySelector('.navbar');

let navGroup = document.createElement('div')
navGroup.className = 'navgroup';

if (document.documentElement.clientWidth <= 600) {
    navbar.appendChild(navGroup)
    navGroup.appendChild(btn)
    navGroup.appendChild(navItems)
}

>Solution :

There are a few issues with your code. First, when using document.querySelector(), you need to provide a valid CSS selector. In your case, you are missing the dot (.) to select elements with class names. So, you should use .burger, .nav-items, and .action-btn instead of ‘burger’, ‘nav-items’, and ‘action-btn’.

Second, you need to correctly append the navGroup element into the DOM. Instead of using navbar.appendChild(navGroup), you should insert it before the burger element. This can be done using the insertBefore() method.

Here’s the modified code:

let burger = document.querySelector('.burger');
let navItems = document.querySelector('.nav-items');
let btn = document.querySelector('.action-btn');
let navbar = document.querySelector('.navbar');

let navGroup = document.createElement('div');
navGroup.className = 'navgroup';

if (document.documentElement.clientWidth <= 600) {
    navbar.insertBefore(navGroup, burger);
    navGroup.appendChild(navItems);
    navGroup.appendChild(btn);
}

With these changes, the code should move the navItems and btn elements into the newly created navGroup element, and then insert navGroup before the burger element when the client width is less than or equal to 600 pixels.