JSFiddle - React, Tailwind, and code Playground

JavaScript

//Creates the html elements
var parentDiv = document.createElement('div');
parentDiv.innerHTML = '\
    <div class="someclass" id="parentID">\
        <select id="myselect">\
            <option value="somevalue">Some value</option>\
            <option value="somesecondvalue">Some second value</option>\
        </select>\
    </div>';

//Adds it to the <body> element
document.body.appendChild(parentDiv);

//Grabs the newly added select box
var myselect = document.querySelector("#myselect");
//Sets the onchange function
myselect.onchange = selectReplace;

//The function that will get called when select box is changed
function selectReplace() {
    //Grabs the parent div
    var parent = document.querySelector("#parentID");
    //Though in this case since we are in an element
    //Triggered event, we can use `this` which will 
    //refer to the element that triggered the event
    //in this case the select box
    var parent = this.parentNode;
    
    //Create the new input element
    var inpuat = document.createElement("input");
    inpuat.type = "text";
    inpuat.name = "2";

    //var theSelectToReplace = document.querySelector("#den3erw");
    //Since we are in a event, `this` will refer to the element
    //that triggered it, the select box so we can just use that.
    var theSelectToReplace = this;
    
    //Replace the child of parent, new element for the first
    //argument and the old element for the second argument
    parent.replaceChild(inpuat,theSelectToReplace);
}