Intente agregar el <div> en HTML en lugar de crearlo cada vez o deberá eliminar cada uno cuando ocurra un evento de cambio. Cuando se elimina o se agrega un elemento al DOM, se produce un reflujo. Un rebajo hace que un navegador vuelva a calcular la posición y la distancia de todo el contenido dentro de la página. Cambiar un elemento que ya existe en la página es menos costoso para el procesamiento del navegador. Consulte esta pregunta sobre reflujos y repintados . El ejemplo es una versión modificada de OP.

• No utilice atributos de un solo evento. Los controladores de eventos en línea son basura , por lo que se reemplazan por un controlador de propiedad onevent, un .addEventListener() también sería una mejor opción.

• La propiedad event.target Event Object se usa para apuntar al elemento modificado (es decir, .select ), this también funcionaría. No es necesario hacer un document.querySelector() dentro de la función.

• ^🞲 Se agregó selected y disabled a la primera ventana emergente de <option> como un valor real.

• Para obtener el valor actual de una propiedad <select> .value será suficiente.

• Se hace referencia a <div> con .nextElementSibling de .select y el texto se sobrescribe con la propiedad .textContent .

• Utilice .selectedIndex = "0"; para restablecer .select en lugar de .value="" .

^{🞲 Según los comentarios de Oskar Grosser a continuación.}

 document.querySelector(".select").onchange = dropdown; function dropdown(e) { const sel = event.target; let selected = sel.value; const div = sel.nextElementSibling; div.textContent = selected; sel.selectedIndex = "0"; }

 <select class="select"> <option selected disabled>choose</option> <option value="op1">Option 1</option> <option value="op2">Option 2</option> </select> <div></div>

Puede guardar el elemento en una variable y luego eliminarlo cuando se vuelva a llamar a la función. ( oldDiv en la implementación de ejemplo a continuación).

 <select class="select"> <option value="">choose</option> <option value="op1">Option 1</option> <option value="op2">Option 2</option> </select> <script> let oldDiv = null // the newest created div will be stored here document.querySelector(".select").addEventListener("change", function(event) { // this way of adding an event listener is preferable, as it allows you to add multiple listeners to the same element if(oldDiv) oldDiv.remove() // remove the old div (if it exists) const div = document.createElement("div") // create new div div.textContent = event.target.value // set text content of new div to the selected value of the dropdown menu document.body.append(div) // add new div to body oldDiv = div // save new div in variable oldDiv, so it gets removed on next function call }) </script>