Dynamically change the button name

Question

I have a button, it consists of a name and an icon. I want to dynamically change the name of the button, but do not touch the icon. How can I do it? innerHTML innerText change completely, they don’t fit

<button>
   NameButton
    <svg>
    </svg>
</button>

Answer 1

You can wrap text into span tag and use childNode to change

document.querySelector("button").childNodes[1].textContent="Something"

<button>
   <span>NameButton</span>
    <svg>
    
    </svg>
</button>

or Without Wrapping into span

document.querySelector("button").childNodes[0].textContent="Something2"

<button>
   NameButton
    <svg>
    
    </svg>
</button>