What is the best way to retrieve multiple elements by class and change their innerHTML?

Question

What is the best way to retrieve multiple elements by class and change their innerHTML?

Encountering an issue with calling multiple elements of the same class using .innerhtml. Here is the URL I am dealing with:

When running the following code in Chrome console, this is the output:

document.getElementsByClassName('a-size-small a-color-secondary')

<span class="a-size-small a-color-secondary">by </span>
<span class="a-size-small a-color-secondary">Adore Plush Company</span>
<span class="a-size-small a-color-secondary">Get it by <span class="a-color-success a-text-bold">Tuesday, Jun 21</span></span>
...
...

However, when trying to access innerHTML using document.getElementsByClassName('a-size-small a-color-secondary').innerHTML

I receive "undefined". The aim is to extract the text only between the span tags.

If anyone can provide guidance or assistance, that would be greatly appreciated. Have already experimented with different approaches like var and Selection method, successfully extracting content from the first class element but encountering issues with SelectionAll. Thank you for any support.

javascript dom

Answer 1

Answer №1

When you use document.getElementsByClassName('a'), it will return the Object with a class name of .

For instance, if the class name is 'a' and there are multiple spans with that class name, you can retrieve the value of a specific span by using its index within the object.


var x = document.getElementsByClassName('a');

console.log("Value of the span: " + x[0].innerHTML);

Check out this Codepen example - http://codepen.io/pen/

Answer 2

When you use document.getElementsByClassName('a'), it will return the Object with a class name of .

For instance, if the class name is 'a' and there are multiple spans with that class name, you can retrieve the value of a specific span by using its index within the object.


var x = document.getElementsByClassName('a');

console.log("Value of the span: " + x[0].innerHTML);

Check out this Codepen example - http://codepen.io/pen/

What is the best way to retrieve multiple elements by class and change their innerHTML?

Answer №1

Similar questions

The CSS transition fails to function correctly when rendering a React element within an array

Issue with checkboxes preventing submission of form

Step-by-step guide for integrating a Twig file in Symfony using Angular's ng-include feature

Accessing dynamic elements in Internet Explorer 7 and 8 using jQuery

Angular 2 property accessor designed similar to Linq style

Unable to establish connection via web socket with SSL and WSS in JavaScript

Console output shows that the function results in undefined

Executing two SQL queries simultaneously in NodeJS can be achieved by using a single statement

What sets array of middlewares apart from compose-middleware?

jPlayer calculates the "duration" as 1,440 minutes on iOs devices for all mp3 files

The recently added item in nestedSortable remains stationary and does not shift positions

Utilize webpack to import functions from separate files

Using React-router-dom's Link component can cause styling inconsistencies with material-ui's AppBar Button

Algorithm that continuously increases a given date by 3 months until it surpasses or matches the specified creation date

Getting duplicate tokens for multiple users while utilizing Firebase messaging

Top method for identifying "abandoned words" within text that has been wrapped

Guide for inserting personalized buttons onto a map with the Bing Maps 6.3 Ajax Control

NodeJS - Subtract one array from another, while keeping all duplicates in place

Determining the condition of the menu: understanding whether it is open or closed

"Troubleshooting callback errors and viewing statistics in multi-configuration setups