changing the text content of both h1 and a span that are on the same line

I have a web page acting as input to an imbedded device and I change modes during operation.
I have the following h1 line.

 <h1 id="speedlab">Speed: <span id="speedText">0</span>%</h1>

and I update it in one mode using :-

 var output = document.getElementById("speedText");
    vslidertmp = (100 -(Math.abs(vslidertmp-100)/2));
    vslidertmp = (vslidertmp.toFixed(0));
    glslider.value = vslidertmp;
    output.innerHTML = (vslidertmp - 100) ;

when I change modes, I want to update the h1 line
to change the header text to "Trim:" and the speedtext content to the value of Trim .
I assume updating the speedtext is the same but how do I update the header text from Speed: to Trim: and leave the span element intact.
I can’t work out the syntax for this.

>Solution :

I’d put the variable text into its own element, to allow for quick toggling of it when needed.

<h1 id="speedlab">
  <span class="mode">Speed</span>: <span id="speedText">0</span>%
</h1>

And to change it

document.querySelector('.mode').textContent = 'Trim';

While you could replace the contents of the text node as well, without changing the HTML markup…

document.querySelector('#speedlab').childNodes[0].textContent = 'Trim: ';

Giving the mode its own element is nicer.