How to wrap the complete text inside elements with a span tag?

I have basically this HTML structure:

<div id="whatever_1">
<button id="something1">
Some text 1
</button>
</div>
<div id="whatever_2">
<a href="..." class="something2">
Some text 2
</a>
</div>
<div id="whatver_3">
<a href="..." class="something3">
Some text 3
</a>
</div>
</div>

I need to wrap all the text which is inside the button- or a-tags with a span tag. So that it looks like this afterwards:

<div id="whatever_1">
<button id="something1">
<span>Some text 1</span>
</button>
</div>
<div id="whatever_2"><a href="..." class="something">
<span>Some text 2</span>
</a>
</div>and so on...

Best would be if I could add an id selector to each of the span elements but this is mandatory.

This code works for a single element, but not for getElementsbyclass which return more than one element. And I can’t use getElementbyId because the parent tag is different, sometimes a button, sometimes an anchor and using class selectors, not always id’s.
I could solve it with PHP and the_content filter but I would prefer a solution in JS/JQuery.

const p = document.getElementById('post-mention');
p.innerHTML = '';
const span = document.createElement('span');
span.innerHTML = pInner;
p.append(span);

Other questions I found here are all about select a word and wrap that in a span tag. But I need the whole text within the a or button tag wrapped in a span.