Вставка записанного результата в

Question

Имеется код генерации табов на JS. Как сделать так, чтобы при вставке в блок результата, каждый из списка элементов оборачивался бы в <li>?

let letters = [];

const itemList = [];

document.querySelectorAll('.productdetails li').forEach((el, i) => {

  const letter = el.innerText.split(' ')[1][0];

  letters.push(letter);

  letters = [...new Set(letters)];

  itemList.push({
    id: i,
    content: el.innerHTML,
    letter: letter
  });

  document.querySelector('.results .tabs').innerHTML =
    letters.map(el => {
      return `<li>${el}</li>`
    });

});

document.querySelectorAll('.tabs li').forEach(tab => {
  tab.onclick = (e) => {
    document.querySelector('.results .content').innerHTML =
      itemList.filter(item => item.letter === e.target.innerText).map(item => item.content);
    const pd = document.querySelector(".productdetails")
    if (pd) {pd.remove()}
  }

});

.results {
  border: 2px solid black;
}

.results .tabs li {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 100px;
  height: 100px;
  border: 1px solid red;
}

.productdetails {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  z-index: -1000;
}

<div class="results">
  <ul class="tabs"></ul>
  <ul class="content"></ul>
</div>


<ul class="productdetails">


  <li class="product-container">

    <h3 class="prod-list-choose">Заголовок A</h3>

  </li>

  <li class="product-container">

    <h3 class="prod-list-choose">Заголовок B</h3>

  </li>

  <li class="product-container">

    <h3 class="prod-list-choose">Заголовок C</h3>

  </li>
</ul>

Answer 1

Вы можете воспользоваться шаблонными строками для того что бы упростить композицию требуемого результата:

let letters = [];

const itemList = [];

document.querySelectorAll('.productdetails li').forEach((el, i) => {

  const letter = el.innerText.trim().split(' ')[1];

  letters.push(letter);

  letters = [...new Set(letters)];

  itemList.push({
    id: i,
    content: el.innerHTML,
    letter
  });

  const lettersMap = letters.map(el => {
      return `<li>${el}</li>`
  });

  document.querySelector('.results .tabs').innerHTML = lettersMap.join('')

});

document.querySelectorAll('.tabs li').forEach(tab => {
  tab.onclick = (e) => {
    document.querySelector('.results .content').innerHTML =
      itemList.filter(item => item.letter === e.target.innerText).map(item => `<li>${item.content}</li>`);
    const pd = document.querySelector(".productdetails")
    if (pd) {
      pd.remove()
    }
  }

});

.results {
  border: 2px solid black;
}

.results .tabs li {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 100px;
  height: 100px;
  border: 1px solid red;
}

.productdetails {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  z-index: -1000;
}

<div class="results">
  <ul class="tabs"></ul>
  <ul class="content"></ul>
</div>


<ul class="productdetails">


  <li class="product-container">

    <h3 class="prod-list-choose">Заголовок A</h3>

  </li>

  <li class="product-container">

    <h3 class="prod-list-choose">Заголовок B</h3>

  </li>

  <li class="product-container">

    <h3 class="prod-list-choose">Заголовок C</h3>

  </li>
</ul>

БЛОГ НА HUSL

Вставка записанного результата в

Ответы (1 шт):