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

【问题标题】：How to target an element in nav bar and change it position using Vanilla javascript如何定位导航栏中的元素并使用 Vanilla javascript 更改其位置
【发布时间】：2021-06-28 10:47:36
【问题描述】：

我想更改我的元素的位置，其中包含“Shoes”数据-在导航栏中并放在第一个位置，更改颜色并仅使用 vanilla 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>

【问题讨论】：

你有三个 data-*="shoes"，你想把这三个都放在 data-*="shirt" 和 "women" 之前吗？
感谢您的帮助 Rahul，我刚刚编辑了代码，我想使用 vanilla javascript 将“鞋子”放在首位
为什么要使用JS？这可以通过 CSS 单独完成（Flexbox + flexoreder 或带有网格区域的 css-grid）。

标签： javascript html css dom

【解决方案1】：

如果您不想要 CSS 文件中的样式，那么您可以通过 JavaScript 使用 flexbox

    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>

【讨论】：

谢谢你们帮助它运行得这么好

【解决方案2】：

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>

【讨论】：

谢谢 ikik 但是当我在控制台上运行代码时它不起作用
@OuailTayarth Np，但它不起作用根本没有帮助，具体来说，你有没有遇到任何错误，你为什么还要在控制台中运行？它是按照我写的方式完成的，它的工作方式就像你在这篇文章的示例小提琴中看到的那样。也许你这边有些不同？检查querySelectorors、console.log(shouesEl) 和console.log(document.querySelector('.main-nav'))，看看你是否得到了正确的元素。调试 1on1 ;)