How do you change an element innerText without changing its children

Question

I have an html element like:

<div id="el1">Change only me<div>but not me</div></div>

but I only wanna change the first text and leave the child div as it is

document.getElementById("el1").innerText = "changed!"

<div id="el1">Change only me<div>but not me</div></div>

Answer 1

Try this:

document.getElementById("el1").childNodes[0].textContent = "changed";

<div id="el1">Change only me<div>but not me</div></div>