tengo una lista de nodos
<ul> <li>One</li> <li>Two</li> <li>Three</li> <li>Four</li> <li>Five</li> </ul> const slides = document.querySelectorAll('ul li');Quiero guardar copias de los primeros y últimos 2 elementos li en una variable.
const first2 = slides.slice(0, 2), last2 = slides.slice(-2);Todas las respuestas que he visto sugieren crear una matriz a partir de la lista de nodos, pero necesito estos elementos para seguir siendo una lista de nodos. ¿Cómo puedo hacer esto?
Quiero crear clones de estos elementos, agregarle una clase y volver a agregarlo a ul. Entonces el html final debería verse así
<ul> <li class="copy">One</li> <li class="copy">Two</li> <li>One</li> <li>Two</li> <li>Three</li> <li>Four</li> <li>Five</li> <li class="copy">Four</li> <li class="copy">Five</li> </ul>¿Te refieres a algo como esto?
const slides = document.querySelectorAll("ul li"); const ul = document.querySelector("ul"); const temp = []; slides.forEach(slide => { const clone = slide.cloneNode(true); clone.classList.add("red"); temp.push(clone); }); temp.slice(0, 2).reverse().forEach(slide => { ul.prepend(slide); }); temp.slice(-2).forEach(slide => { ul.appendChild(slide); }); .red { color:red; } <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> </ul>Puedes seleccionar como en CSS. En este caso :first-child y :last-child
const firstElement = document.querySelector('ul li:first-child'); console.log('firstElement', firstElement) const lastElement = document.querySelector('ul li:last-child'); console.log('lastElement', lastElement) ul li:first-child { color:red; } ul li:last-child { color:green; } <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> </ul>