How to target an element in nav bar and change it position using Vanilla javascript

Question

I want to change the position of my element that has "Shoes" at it data- in the navbar and put in the first position, change the color and add a border-bottom to it using only vanilla javascript Please find the code bellow Thank you for your help

<div class="main-nav">
  <div class="mobile-menu">
    <a class="js-mm-link" data-before="women" data-niveau="women">
  </div>
  <div class="mobile-menu">
    <a class="js-mm-link" data-before="shirt" data-niveau="shirt">
  </div>
  <div class="mobile-menu">
    <a class="js-mm-link" data-before="shoes" data-niveau="shoes">
  </div>
  <div class="mobile-menu">
    <a class="js-mm-link" data-before="Hat" data-niveau="Hat">
  </div>
</div>

Answer 1

 let shouesEl= document.querySelector('[data-niveau="shoes"]').parentElement //get element let shoues = shouesEl.outerHTML // save it shouesEl.innerHTML="" // remove it document.querySelector('.main-nav').insertAdjacentHTML("afterbegin", shoues); //add it console.log(shoues)

 <div class="main-nav"> <div class="mobile-menu"> <a class="js-mm-link" data-before="women" data-niveau="women">women</a> </div> <div class="mobile-menu"> <a class="js-mm-link" data-before="shirt" data-niveau="shirt">shirt</a> </div> <div class="mobile-menu"> <a class="js-mm-link" data-before="shoes" data-niveau="shoes">shoes</a> </div> <div class="mobile-menu"> <a class="js-mm-link" data-before="Hat" data-niveau="Hat">Hat</a> </div> </div>

Answer 2

If you don't want styles from CSS file then You can use flexbox via JavaScript

 const x = document.querySelector(".main-nav"); const y = document.querySelector("a[data-before='shoes']"); x.style.display="flex", x.style.flexDirection = "column", /* for inline menu x.style.flexDirection = "row", */ y.parentElement.style.order=-1;

 <div class="main-nav"> <div class="mobile-menu"> <a class="js-mm-link" data-before="women" data-niveau="women"> Women </a> </div> <div class="mobile-menu"> <a class="js-mm-link" data-before="shirt" data-niveau="shirt"> Shirt </a> </div> <div class="mobile-menu"> <a class="js-mm-link" data-before="shoes" data-niveau="shoes">Shoes</a> </div> <div class="mobile-menu"> <a class="js-mm-link" data-before="Hat" data-niveau="Hat">Hat</a> </div> </div>