时间戳

首页 > 解决方案 > 如何定位导航栏中的元素并使用 Vanilla javascript 更改其位置

javascript - 如何定位导航栏中的元素并使用 Vanilla javascript 更改其位置

问题描述

我想更改我的元素的位置，其中包含“Shoes”数据-在导航栏中并放在第一个位置，更改颜色并仅使用香草javascript为其添加边框底部请找到下面的代码谢谢您的帮助

<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>

标签： javascripthtmlcssdom

解决方案

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>

推荐阅读