Moving <li> to nth position and change href link using JavaScript

Question

I want to move the first item on the list into the 10th position and also change the href link from "collections/all" to "collections/all/cotton" by the use of JavaScript. There is no option of adding an id to the elements, is it possible to do it without it?

 <ul class="tags tags--collection inline-list"> <li><a href="collections/all">All</a></li> <li class="tag--active"><a href="/collections/all" title="Remove tag accessories">accessories</a></li> <li><a href="collections/all/athletic" title="Show products matching tag athletic">athletic</a></li> <li><a href="collections/all/bracelet" title="Show products matching tag bracelet">bracelet</a></li> <li><a href="collections/all/coat" title="Show products matching tag Coat">Coat</a></li> <li><a href="collections/all/cold" title="Show products matching tag cold">cold</a></li> <li><a href="collections/all/cotton" title="Show products matching tag cotton">cotton</a></li> <li><a href="collections/all/fall" title="Show products matching tag Fall">Fall</a></li> <li><a href="collections/all/gloves" title="Show products matching tag gloves">gloves</a></li> <li><a href="collections/all/leather" title="Show products matching tag leather">leather</a></li> <li><a href="collections/all/rain" title="Show products matching tag Rain">Rain</a></li> <li><a href="collections/all/raincoat" title="Show products matching tag Raincoat">Raincoat</a></li> <li><a href="collections/all/scarf" title="Show products matching tag Scarf">Scarf</a></li> <li><a href="collections/all/silk" title="Show products matching tag silk">silk</a></li> <li><a href="collections/all/summer" title="Show products matching tag summer">summer</a></li> <li><a href="collections/all/vintage" title="Show products matching tag vintage">vintage</a></li> <li><a href="collections/all/watch" title="Show products matching tag watch">watch</a> </li> <li><a href="collections/all/winter" title="Show products matching tag winter">winter</a> </li> </ul>

Answer 1

I've included comments before each step of the JavaScript below. If something is not clear, feel free to ask in a comment.

 // Select the unordered list by its classes const list = document.querySelector('ul.tags.tags--collection.inline-list'); // Select the 1st item in the list by its position const first = list.querySelector(':scope > li:nth-child(1)'); // Select the 10th item in the list by its position const tenth = list.querySelector(':scope > li:nth-child(10)'); // Move the 1st item after the 10th. // Inserting removes an item from its parent and inserts it into the new location. // This shifts the 10th item into position 9, and the first item into position 10. tenth.insertAdjacentElement('afterend', first); // Select the anchor within the list item and modify its "href" property first.querySelector(':scope > a').href = 'collections/all/cotton';

 <ul class="tags tags--collection inline-list"> <li><a href="collections/all">All</a></li> <li class="tag--active"><a href="/collections/all" title="Remove tag accessories">accessories</a></li> <li><a href="collections/all/athletic" title="Show products matching tag athletic">athletic</a></li> <li><a href="collections/all/bracelet" title="Show products matching tag bracelet">bracelet</a></li> <li><a href="collections/all/coat" title="Show products matching tag Coat">Coat</a></li> <li><a href="collections/all/cold" title="Show products matching tag cold">cold</a></li> <li><a href="collections/all/cotton" title="Show products matching tag cotton">cotton</a></li> <li><a href="collections/all/fall" title="Show products matching tag Fall">Fall</a></li> <li><a href="collections/all/gloves" title="Show products matching tag gloves">gloves</a></li> <li><a href="collections/all/leather" title="Show products matching tag leather">leather</a></li> <li><a href="collections/all/rain" title="Show products matching tag Rain">Rain</a></li> <li><a href="collections/all/raincoat" title="Show products matching tag Raincoat">Raincoat</a></li> <li><a href="collections/all/scarf" title="Show products matching tag Scarf">Scarf</a></li> <li><a href="collections/all/silk" title="Show products matching tag silk">silk</a></li> <li><a href="collections/all/summer" title="Show products matching tag summer">summer</a></li> <li><a href="collections/all/vintage" title="Show products matching tag vintage">vintage</a></li> <li><a href="collections/all/watch" title="Show products matching tag watch">watch</a> </li> <li><a href="collections/all/winter" title="Show products matching tag winter">winter</a> </li> </ul>

Answer 2

You need to do a few manipulations

Change [0] in the line list.querySelectorAll("li")[0] to the zero based number you need

 const list = document.querySelector("ul.tags.tags--collection.inline-list"); // or use an ID const li = list.querySelectorAll("li")[0]; // or list.firstElementChild const link = li.querySelector("a"); link.href = link.href.replace("all","all/cotton"); console.log(link.href); list.insertBefore(li, list.children[10]); // note to move to the end, just use list.append(li)

 <ul class="tags tags--collection inline-list"> <li><a href="collections/all">All</a></li> <li class="tag--active"><a href="/collections/all" title="Remove tag accessories">accessories</a></li> <li><a href="collections/all/athletic" title="Show products matching tag athletic">athletic</a></li> <li><a href="collections/all/bracelet" title="Show products matching tag bracelet">bracelet</a></li> <li><a href="collections/all/coat" title="Show products matching tag Coat">Coat</a></li> <li><a href="collections/all/cold" title="Show products matching tag cold">cold</a></li> <li><a href="collections/all/cotton" title="Show products matching tag cotton">cotton</a></li> <li><a href="collections/all/fall" title="Show products matching tag Fall">Fall</a></li> <li><a href="collections/all/gloves" title="Show products matching tag gloves">gloves</a></li> <li><a href="collections/all/leather" title="Show products matching tag leather">leather</a></li> <li><a href="collections/all/rain" title="Show products matching tag Rain">Rain</a></li> <li><a href="collections/all/raincoat" title="Show products matching tag Raincoat">Raincoat</a></li> <li><a href="collections/all/scarf" title="Show products matching tag Scarf">Scarf</a></li> <li><a href="collections/all/silk" title="Show products matching tag silk">silk</a></li> <li><a href="collections/all/summer" title="Show products matching tag summer">summer</a></li> <li><a href="collections/all/vintage" title="Show products matching tag vintage">vintage</a></li> <li><a href="collections/all/watch" title="Show products matching tag watch">watch</a> </li> <li><a href="collections/all/winter" title="Show products matching tag winter">winter</a> </li> </ul>