Select classes and modify using JavaScript

Design help Custom code
1

I’m not a developer, so please view my query with that context in mind.

I’d like to select and modify buttons with the combination of classes ‘secondary button’ and ‘angle-right’. In this case, the modification is to append an icon from Font Awesome using the code after the ‘Learn more’ text on each button.

The following does not work:

document.querySelectorAll(".secondary-button.angle-right").append('<i class="fa-solid fa-angle-right"></i>');

Using an element’s ID (e.g. ‘learn-more-tech’) works.

$('#learn-more-tech').append('<i class="fa-solid fa-angle-right"></i>');

Here is my site Read-Only

What code can I use to select and modify this combination of classes?

Ideally, I’d like to add the class ‘angle right’ to various buttons classes (e.g. the class ‘primary button’ and ‘news button’) and just modify ‘angle right’.

2

HI @tom.alffie when using javaScript you should use appendChild as append in javaScript has different meaning that has in jQuery. You do not need IIFE to add icon to each element but use loop instead.

1 Like
3

Thanks @Stan. I’m still getting the error:

Uncaught TypeError: document.querySelectorAll(...).appendChild is not a function

But I’ll look at adding appendChild where I’ve got append.

4

Hi @tom.alffie here is simple example. Only difference is that Im using feather icons instead font-awesome as It was easier for me.

1 Like
5

Hi @tom.alffie,

I think you’d need something like this:

const el = document.createElement('i');
el.classList.add('fa-solid', 'fa-angle-right');

const secondaryButtons = document.querySelectorAll(".secondary-button")

for (let button of secondaryButtons){
    button.appendChild(el)
}

As @Stan mentioned, you’d need to use a loop because when you use document.querySelectorAll you’re getting an array.

2 Likes
6

Thank you @mww and @Stan. The looping through an array is the crucial bit of information I needed.

7

hi @tom.alffie if you do not need further assitance please close your request as solved.