Javascript 在js中创建元素

我想在我的html和createElement中使用js创建和元素，但我的代码中出现了一些错误

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);
    }

HTML
黄豆
JS
let buttonpueba=document.getElementsByClassName（“prueba_boton”）；
按钮PUEBA[0]。添加的EventListener（“单击”，函数PRUEBA）；
console.log（“hola”，functionprueba）；
函数functionprueba（）{
var printTextIDDiff=document.createElement（“h2”）；
setAttribute（“类”，“textiddread”）；
PrintTextIDDride.innerHTML=“Bebida:olaaa”；
日志（“me estoy ejecutando”）；
document.getElementsByClassName（“prueba”）.append（printTextIDDride）；
}

这里是控制台错误 me estoy ejecutando main.js:28:11（console.log（我正在执行）

---

未捕获的TypeError:document.GetElementsByCassName（…）.append不是函数 功能性Prueba

---

EventListener.handleEvent*

使用getElementsByClassName时，它返回一个集合，因此，您可以在追加之前选择元素：

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

或者使用仅返回一个元素的id属性：

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

...
document.getElementById（“prueba”）.append（printTextId）；

这可能会有所帮助

let buttonpueba=document.querySelector（“.prueba_boton”）；
按钮pueba.addEventListener（“单击”，函数prueba）；
//console.log（“hola”，functionprueba）；
函数functionprueba（）{
var printTextIDDiff=document.createElement（“h2”）；
setAttribute（“类”，“textiddread”）；
PrintTextIDDride.innerHTML=“Bebida:olaaa”；
日志（“me estoy ejecutando”）；
document.querySelector（“.prueba”）.append（printextiddread）；
}

soy una prueba

getElementsByClassName

返回元素集合，而不是单个元素。不能附加到HTMLCollection.document.getElementsByClassName（“prueba”）[0]也可以使用

document.querySelector（'.prueba'）

。