在js中创建元素

Question

我想在 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);
    }

这里我有控制台错误 me estoy ejecutando main.js:28:11(console.log(我正在执行)

未捕获类型错误：document.getElementsByClassName(...).append 不是一个函数功能普鲁埃巴 http://127.0.0.1:5500/main.js:29 EventListener.handleEvent* http://127.0.0.1:5500/main.js:22

Answer 1

当您使用 getElementsByClassName 时，它 returns 一个集合，因此，您可以 select 追加之前的元素：

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

或者使用一个 id prop returns 只有一个元素：

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

Answer 2

这可能会有所帮助。

let buttonPrueba = document.querySelector(".prueba_boton");
buttonPrueba.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.querySelector(".prueba").append(printTextIdDrink);
}

<button class="prueba_boton">soy una prueba</button>
<div class="prueba"></div>

在js中创建元素

Create elements in js

javascript

css

createelement

vue.js