javascript - JavaScript - 与 parentNode.replaceChild 结合使用时，我无法让 appendChild 操作工作

Question

我有一个在 JS 中使用 replaceChild 操作生成的汉堡菜单。如果 JS 被禁用，则有一个标准按钮代替汉堡包。

JS 汉堡是一个带有“点击”功能的伪元素。我需要生成这个带有 classList 的元素，这样我就可以设置和控制汉堡动画的样式。

目前 createElement > classList.add > appendChild 不起作用。我不确定为什么我的这部分代码没有生成所需的子元素。但是，我能够毫无问题地生成“按钮”。

<nav>...
            <div class="hamburger-wrapper">
            <div hidden data-menu-button class="nav-toggle">Menu</div> <--// pseudo-element goes here
            <ul id="menu" data-menu>
              <li><a class="color-shift" href="/">Case Studies</a></li>
              <li><a class="color-shift" href="/">About Izzy</a></li>
            </ul>

...</nav>

(function menu() {
  const fakeButton = document.querySelector('[data-menu-button]');
  const menu = document.querySelector('[data-menu]');

  const toggleMenuButton = document.createElement('button');
  toggleMenuButton.textContent = fakeButton.textContent;
  toggleMenuButton.setAttribute('aria-expaned', false);
  toggleMenuButton.setAttribute('aria-controls', 'menu');
  toggleMenuButton.classList.add('nav-toggle');

  const toggleMenuHamburger = document.createElement('div');
  toggleMenuHamburger.classList.add('hamburger-menu');
  toggleMenuHamburger.appendChild(toggleMenuButton);

  fakeButton.parentNode.replaceChild(toggleMenuButton, fakeButton);

  toggleMenuButton.addEventListener('click', function () {
    let expanded = this.getAttribute('aria-expanded') === 'true' || false;
    this.setAttribute('aria-expanded', !expanded);
    menu.hidden = !menu.hidden;
  });

  menu.hidden = true;
})();

(function hamburgerAnimation() {
  $('.hamburger-wrapper').on('click', function () {
    // console.log('click');
    $('.hamburger-menu').toggleClass('animate');
  });
})();```
 

标签： javascripthtmljquerycss