Как отфильтровать список из DOM?

Question

[Miron4ek_228]

Вот код https://codepen.io/Menson/pen/VwXxVow?editors=1010

В первом списке имеется food / aniomal. Элемент который содержит в себе animal необходимо продублировать на втором списке.

Я знаю как фильтровать объект который создан в js непосредственно, но у меня не получается отфильтровать DOM-элементы. Предполагаю что здесь нет существенной разницы, однако мои методы не работают.

Если мои суждения не верны - пожалуйста, поправьте. Скорее всего я ошибаюсь:
Я думаю нет необходимости создавать объект с данными из списка вручную (так как const item является объектом, содержащим эту информацию соответственно). Нужно отфильтровать item по категории animal и создать новый объект animalsObj, данные которого помещаются в светлый список.

1) Правильно ли я понимаю, что необходимо использовать метод maps?
2) Как это сделать с имеющимся DOM?
3) Правильно ли я в данном случае использую getElementsByClassName?

Comments

[Сергей Сергей]

[...document.querySelectorAll( '.list__items .item' )]
  .map( el => ({ el, animal: el.innerText.trim().endsWith( 'animal' ) }) )

дальше самостоятельно.

Answer 1

[historydev]

<div class="list">
            <ul class="list__items current-list">
                <li class="item">Egg - food</li>
                <li class="item">Dog - animal</li>
                <li class="item">Cat - animal</li>
                <li class="item">Bread - food</li>
            </ul>
            <ul class="list__items new-list">
              <!-- animal - список -->
            </ul>
        </div>

document.querySelector('.new-list').innerHTML = [...document.querySelectorAll('.current-list li')].map(el => {
   if(el.innerText.indexOf('animal') > -1) return `<li class="item">${el.innerText}</li>`;
 }).join('');

Answer 2

[Антон Шаманов]

let newElement = document.createElement('li')
ulList[0].insertAdjacentElement('beforeend', newElement)
newElement.innerHTML = `<li class="item">Bear - animal</li>`

твой код создает<li><li class="item">Bear - animal</li></li>вместо <li class="item">Bear - animal</li>