javascript - 在纯 Javascript 中复制元素和更改类

Question

晚上好，我想复制一个 html 菜单并仅使用纯 Javascript(即不使用 jQuery)更改其类。

输入:

<header>
    <nav class="page-nav">
        <ul class="social"><li>...</li></ul>
    </nav>
</header>
<main>...</main>
<footer>
    <nav class="footer">
        <ul class="footer-menu"><li>...</li></ul>
    </nav>
</footer>

.footer-menu 被复制到 .page-nav 并且类更改为 .main-menu。

输出:

<header>
    <nav class="page-nav">
        <ul class="social"><li>...</li></ul>
        <ul class="main-menu"><li>...</li></ul>
    </nav>
</header>
<main>...</main>
<footer>
    <nav class="footer">
        <ul class="footer-menu"><li>...</li></ul>
    </nav>
</footer>

如有任何帮助，我们将不胜感激。

谢谢

编辑...这是我尝试过的方法，但是虽然它创建了包装器但它没有创建任何内容...

var menuBar = (function () {
    var footerMenu = document.querySelector('.footer-menu'),
        headerMenu = document.querySelector('.page-nav');

    function init() {
        var wrapper = document.createElement('ul');
        wrapper.setAttribute("class", "main-menu");
        headerMenu.insertBefore(wrapper, headerMenu.childNodes[0]);
        wrapper.appendChild(footerMenu.childNodes);
    }

    init();

})();

Answer 1

六行代码使用:

• .querySelector()........: Reference

• .cloneNode()................: Replicate

• .classList/className: Rename

• .appendChild().............: Relocate

代码段中注释的详细信息

---

片段

// Reference the .footer-menu
var ftMenu = document.querySelector('.footer-menu');

// Reference the .page-nav
var pgNav = document.querySelector('.page-nav');

// Clone the .footer-menu
var dupe = ftMenu.cloneNode(true);

// Clear .footer-menu of any classes
dupe.className = "";

// Add .main-menu to .footer-menu's clone
dupe.classList.add('main-menu');

// Append the clone of .footer-menu to .page-nav
pgNav.appendChild(dupe);

.main-menu {
  border: 2px solid white;
  background: red;
  color: white;
  width: 250px;
}

.footer-menu {
  border: 1px solid black;
  background: tomato;
  width: 250px;
}

footer,
header {
  border: 2px dashed blue;
}

footer {
  background: seagreen
}

header {
  background: goldenrod;
}

main {
  background: brown;
  color: white
}

.social {
  background: lightblue;
  border: 2px solid grey;
  width: 250px;
}

<header>
  HEADER
  <nav class="page-nav">
    <ul class="social">
      <li>FB</li>
      <li>TW</li>
    </ul>
  </nav>
</header>
<main>
  MAIN CONTENT
</main>
<footer>
  FOOTER
  <nav class="footer">
    <ul class="footer-menu">
      <li>SO</li>
      <li>MDN</li>
      <li>DT</li>
    </ul>
  </nav>
</footer>