I am trying to change a <textarea> field in an HTML login page into an <input> field, dynamically, on page load.

<div class="field input-field">
    <span class="user-icon">
    </span>
    <textarea class="qStr" data-qstrph="LDAP_SERVER_STR12" id="username" autocomplete="off" placeholder="Username">
    </textarea>
    <span class="reset-icon slice-img">
    </span>
</div>

The first thing I thought of was TamperMonkey, and using JavaScript to do this.

I reached out to a friend of mine, who is far more talented than I am, and asked him to make a small JavaScript bit to do what I'm wanting. He quickly came back with this:

const originalItem = document.getElementById("username")
const newItem = document.createElement("input")
newItem.setAttribute("type", "text")
newItem.setAttribute("class", "qStr")
newItem.setAttribute("data-qstrph", "LDAP_SERVER_STR12") 
newItem.setAttribute("id", "username")
newItem.setAttribute("autocomplete", "off")
newItem.setAttribute("placeholder", "Username")
originalItem.replaceWith(newItem)

When I run this snippet in the Chrome developer console, it does exactly what you'd expect it to do, and that's awesome! When I take the same block and put it into TamperMonkey, save the file, and make sure its an enabled script, and reload the HTML page -- nothing happens -- and this makes me sad:

Here is the code, as it is in TamperMonkey:

I'm not sure what I'm not doing right, as the code worked perfectly in the dev console.

Your input is appreciated, thank you!