Как клонировать выпадающие списки?

Question

[MRcracker]

Есть html список. Подскажите,как можно клонировать выпадающие списки с классом submenu в новый div блок? Пробовал использовать nextSibling, но что-то я делал видно не так потому что не получилось

<nav>
  <ul class="topmenu">
    <li><a href="">Home</a></li>
    <li><a href="">Shop</a></li>
    <li><a href="" class="down">Blog</a>
      <ul class="submenu">
        <li><a href="">Category</a></li>
        <li><a href="">Author</a></li>
        <li><a href="">Archive</a></li>
        <li><a href="">Tags</a></li>
      </ul>
    </li>
    <li><a href="" class="down">Portfolio</a>
      <ul class="submenu">
        <li><a href="">Category</a></li>
        <li><a href="">Author</a></li>
        <li><a href="">Archive</a></li>
        <li><a href="">Tags</a></li>
      </ul>
    </li>
    <li><a href="">Contact</a></li>
  </ul>
</nav>

Answer 1

[ArturMavlidov]

То есть вы заранее знаете, какую разметку нужно скопировать в новый div блок?
Тогда, предположим, такую структуру:

<div class="container">
<nav>
  <ul class="topmenu">
    <li><a href="">Home</a></li>
    <li><a href="">Shop</a></li>
    <li><a href="" class="down">Blog</a>
      <ul class="submenu">
        <li><a href="">Category</a></li>
        <li><a href="">Author</a></li>
        <li><a href="">Archive</a></li>
        <li><a href="">Tags</a></li>
      </ul>
    </li>
    <li><a href="" class="down">Portfolio</a>
      <ul class="submenu">
        <li><a href="">Category</a></li>
        <li><a href="">Author</a></li>
        <li><a href="">Archive</a></li>
        <li><a href="">Tags</a></li>
      </ul>
    </li>
    <li><a href="">Contact</a></li>
  </ul>
</nav>
</div>

Теперь nav находится в container. Далее, с помощью js создаем в этом же контейнере, но после закрывающего тега nav, новый div.

const container = document.querySelector('.container');

container.insertAdjacentHTML('beforeend', `<div>ТУТ ВАШ СПИСОК</div>`)

Comments

[MRcracker]

Мне нужно скопировать только submenu

[ArturMavlidov]

А в чём проблема? Вторым аргументом в insertAdjacentHTML передайте разметку с submenu

[MRcracker]

ArturMavlidov, подскажите,а проверку можно задать как-то на то есть ли у элемента выпадающий список или нет?

[MRcracker]

ArturMavlidov, Вы немного не поняли меня. У меня html список нужно дублировать тк разметка с бекенда приходит списком, который я описал выше

[ArturMavlidov]

MRcracker, Всё еще не до конца понимаю. Вы заранее не знаете, какой именно список вам придет с бекенда, поэтому вам нужно обработать пришедший список, найти в нем элементы с классом submenu и клонировать их в другой блок?

[MRcracker]

ArturMavlidov, Верно. я просто знаю какая будет структура,но что именно придет в данной структуре не знаю т.к. пункты меню могут отличаться

[ArturMavlidov]

MRcracker, Такое решение подойдет?

const nav = document.querySelector('nav');
const container = document.querySelector('.container') // container - это div, в который мы будем добавлять все submenu

const subMenuLists = nav.querySelectorAll(".submenu");

subMenuLists.forEach(item => container.insertAdjacentElement("beforeend", item))

[MRcracker]

ArturMavlidov, да спасибо, а еще вопрос, ка как мне сделать проверку, если нажали на ссылку например down, то дублируется только подменю данного блока?

[ArturMavlidov]

MRcracker,

const nav = document.querySelector('nav');
const container = document.querySelector('.container')
const links = document.querySelectorAll('.down');

const handleLink = (e) => {
  e.preventDefault();
  container.insertAdjacentHTML("beforeend", e.target.nextElementSibling.innerHTML);
}

links.forEach(item => item.addEventListener('click', handleLink))

[MRcracker]

ArturMavlidov, Большое спасибо вам