I have a nodelist
<ul>
<li>One</li>
<li>Two</li>
<li>Three</li>
<li>Four</li>
<li>Five</li>
</ul>
const slides = document.querySelectorAll('ul li');
I want to save copies of first and last 2 li elements to a variable.
const first2 = slides.slice(0, 2),
last2 = slides.slice(-2);
All the answers I've seen suggest creating array from nodelist but I need these elements to remain a nodelist. How can I do this?
I want to create clones of these items, add a class to it and add it back to ul. So the final html should look like this
<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>
Do you mean something like this?
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>You can you selector like in CSS. In this case :first-child and :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>