Create elements in js

Question

I want to create and element with js in my html with createElement but somethings wrong in my code.

HTML
 <button class="prueba_boton">soy una prueba</button>
    <div class="prueba"></div>
JS
    let buttonPrueba = document.getElementsByClassName("prueba_boton");
    buttonPrueba[0].addEventListener("click", funcionPrueba);
    console.log("hola", funcionPrueba);
    function funcionPrueba() {
      var printTextIdDrink = document.createElement("h2");
      printTextIdDrink.setAttribute("class", "TextIdDrink");
      printTextIdDrink.innerHTML = "<span>Bebida:olaaa </span>";
      console.log("me estoy ejecutando");
      document.getElementsByClassName("prueba").append(printTextIdDrink);
    }

and here I have the console error me estoy ejecutando main.js:28:11(console.log(I`m executing)

uncaught TypeError: document.getElementsByClassName(...).append is not a function funcionPrueba http://127.0.0.1:5500/main.js:29 EventListener.handleEvent* http://127.0.0.1:5500/main.js:22

Answer 1

When you use getElementsByClassName it returns a collection, so, you can select the element before append:

document.getElementsByClassName("prueba")[0].append(printTextIdDrink);

Or use an id prop that returns only one element:

<div id="prueba"></div>
...
document.getElementById("prueba").append(printTextIdDrink);