How to change the textContent o just text of a without changing the rest of the content

I want to change the text of a span with a checkbox inside like this:

function checkChange(){
       document.getElementById("span1").textContent="red";}

<span id="span1" style="color:darkolivegreen;font-weight:bold">
    <input id="check1" type='checkbox' onclick="checkChange();">blue
</span>

the result is this: <span style="color:darkolivegreen;font-weight:bold">red</span> And the checkbox disapears. It's the same with innerHTML. How can I change the text without afecting other fields inside my span