Include a new class in the classList of an element at a specific index

Question

Include a new class in the classList of an element at a specific index

Is it possible to add a class to a specific position in order to maintain a certain order, especially when it goes against the logic that targets the class based on its position?

link.closest('item').classList.add('c-class')

// Contradiction We need (a-class) instead I get (c-class) that has been added
let getThisClass = e.target.parentElement.classList[1]

<!-- before adding -->
<li class="item aclass bclass" id="60fe102d6e87274484dd2785"></li>
<!-- after adding -->
<li class="item c-class a-class b-class" id="60fe102d6e87274484dd2785"></li>

javascript html

Answer 1

Answer №1

To insert a new class into the className, you can split it by spaces, add the new class at a specific position in the array (using Array#splice), and then reassign the updated className back after joining by spaces:

const link = document.getElementById("60fe102d6e87274484dd2785");
list = link.className.split(" ");
list.splice(1, 0, "c-class")
link.className = list.join(" ");
console.log(link.className);

<!-- before adding -->
<li class="item aclass bclass" id="60fe102d6e87274484dd2785"></li>

For a more general implementation, you can use the following function:

const link = document.getElementById("60fe102d6e87274484dd2785");
insertClassAtPosition(link, "c-class", 1);
console.log(link.className);

function insertClassAtPosition(element, className, index){
  let l = element.className.split(" ");
  l.splice(index, 0, className);
  element.className = l.join(" ");
}

<!-- before adding -->
<li class="item aclass bclass" id="60fe102d6e87274484dd2785"></li>

Answer 2

To insert a new class into the className, you can split it by spaces, add the new class at a specific position in the array (using Array#splice), and then reassign the updated className back after joining by spaces:

const link = document.getElementById("60fe102d6e87274484dd2785");
list = link.className.split(" ");
list.splice(1, 0, "c-class")
link.className = list.join(" ");
console.log(link.className);

<!-- before adding -->
<li class="item aclass bclass" id="60fe102d6e87274484dd2785"></li>

For a more general implementation, you can use the following function:

const link = document.getElementById("60fe102d6e87274484dd2785");
insertClassAtPosition(link, "c-class", 1);
console.log(link.className);

function insertClassAtPosition(element, className, index){
  let l = element.className.split(" ");
  l.splice(index, 0, className);
  element.className = l.join(" ");
}

<!-- before adding -->
<li class="item aclass bclass" id="60fe102d6e87274484dd2785"></li>

Answer 3

Answer №2

// selecting the link element
const link = document.getElementById("link");

// finding the closest item element
const item = link.closest('.item');

// adding a new class to the item element
item.className += ' c-class';
console.log(item.className);

// removing the added class from the item element
item.className = item.className.replace(/c-class/,'').trim();
console.log(item.className);

<!-- original structure -->
<li class="item a-class b-class" id="60fe102d6e87274484dd2785"><a id="link">#</a></li>

Answer 4

// selecting the link element
const link = document.getElementById("link");

// finding the closest item element
const item = link.closest('.item');

// adding a new class to the item element
item.className += ' c-class';
console.log(item.className);

// removing the added class from the item element
item.className = item.className.replace(/c-class/,'').trim();
console.log(item.className);

<!-- original structure -->
<li class="item a-class b-class" id="60fe102d6e87274484dd2785"><a id="link">#</a></li>

Include a new class in the classList of an element at a specific index

Answer №1

Answer №2

Similar questions

Using Javascript, verify if a given URL is legitimate and commences with "http://" or "https://"

Disable the background color css when hovering over a button

Obtaining a list of child span elements using xpath in Selenium

Is it necessary to have NodeJs in order to host a React app on a server?

List that spans the entire width of the browser, with text limited to a maximum width

Using two different colors in text with CSS

Implementing Placeholder Text Across Multiple Lines with Material UI

What steps can be taken to execute a function when a button remains unclicked?

How to Validate Prop Types in VueJS When Dealing With NULL and 'undefined' Values?

What is the best way to enhance specific sections of Django content by incorporating <span> tags, while maintaining the original paragraph text format?

Protractor - selecting a hyperlink from a list

Enhancing Next.js Images with Custom CSS Styles

What causes scope to be undefined in Angular?

Placing a div with absolute positioning inside another div with absolute positioning raises the question of how it functions when the outer div is not set to position: relative

Trouble with selecting inputs within a Div Element

Guide to redirecting on click when utilizing an iframe

Troubleshooting a problem with CSS animations disappearing

What could be causing my Font Awesome icon background to fail to load?

Ensure that the image inside a resizable container maintains the correct aspect ratio

Simple Steps to Connect an HTML File to CSS in Windows Notepad