在js中创建元素答案

【问题标题】：Create elements in js在js中创建元素
【发布时间】：2021-08-06 13:06:55
【问题描述】：

我想在我的 html 中使用 createElement 创建和元素，但我的代码有问题。

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

【问题讨论】：

getElementsByClassName 返回元素集合，而不是单个元素。
您不能追加到 HTMLCollection。
document.getElementsByClassName("prueba")[0]
你也可以使用document.querySelector('.prueba')。

标签： javascript css vue.js createelement

【解决方案1】：

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

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

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

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

【讨论】：

【解决方案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>

【讨论】：