How to change the value of innerText at a particular index?

I am trying to change the string displayed in the frontend by using function in javascript.

let displayword = document.getElementById(“displayword”)
console.log(displayword.innerText) //apple

Say, I want the change the letter “l” to something else say “i” but keep the rest of the letters unchanged how do I go around this?

Things I have tried

displayword.innerText[3] = “i”           // -----does nothing----

I am confused why the above code using index does nothing, while the below does something

dash.innerText += “i”      //applei

Extra question: Why does the above code using =+ change the formatting of the innerText? I want to keep the large font but it changes to regular font of the element (here I am using h1).

Thank you:)