Change innerHTML of span which part of the name changes in time

Question

I'm trying to change the .innerHTML of a span for which the name changes every time I refresh the page (only some part of that name changes)

So for example, I always use this to change the span's innerHTML:

document.getElementsByClassName('something')[0].innerHTML='new text';

but my problem is that the site now adds random characters after that "something", for example:

<span class="something RANDOM123 random212312">some text</span>

and my question is, is this possible to find this span and change the innerHTML of it just by looking for the first part of the class name which is "something"?

score 2 · Accepted Answer · answered Aug 22 '22 at 14:55

Maybe you can use partial selector:

 $('[class^="value"]') <-- starts with string
 $('[class$="value"]') <-- ends with string

// using jQuery
$('[class^="something"]')[0].innerHTML='new text';

// using document
document.querySelectorAll('[class^="something"]')[1].innerHTML='new other text';

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<span class="something RANDOM123 random212312">some text</span>
<span class="something RANDOM123 random212312">some other text</span>

score 0 · Answer 2 · answered Aug 22 '22 at 14:56

Can you just add an ID to the spans you want to update? Then just search by those IDs? That's likely the correct way to do it. Otherwise, you might have to write your own thing that loops through the collection of spans in the document and check the class to see if it starts with "something" (prehaps indexOf === 0).

function GetSomethingSpans() {
    const AllSpans = document.getElementsByTagName('span');
    const AllSpanCount = AllSpans.length;
    const SomethingSpans = [];

    for (var i = 0; i < AllSpanCount; i++) {
        if (AllSpans[i].className.indexOf("something") === 0) {
            SomethingSpans.push(AllSpans[i]);
        }
    }

    return SomethingSpans;
}

This is entirely untested, and there might be bugs. But hopefully it's a useful starting point. Could probably adjust it to have a parameter that is the class you're looking for, and you don't have to make it be the first class... hopefully this gets you going.

Thanks Kevin, user "mara black" already posted a solution which works for me, but I really appreciate your contribution — MARC PLOIT, Aug 22 '22 at 15:00

score 0 · Answer 3 · answered Aug 22 '22 at 14:58

0

document.querySelectorAll("something") will retrieve all elements that have that class, regardless of what others classes are added to the element.

answered Aug 22 '22 at 14:58

mykaf

1,034
1
9
12

Thanks so much! Didn't know that, however I made a mistake, because the site adds random characters to the first class as well, for example "something-random123 random222", the solution posted by "Mara Black" worked perfectly for me in that case. – MARC PLOIT Aug 22 '22 at 15:07

Change innerHTML of span which part of the name changes in time

3 Answers3