无法通过点击按钮在 div 内创建另一个 div

Question

What I

function creatediv(){
            const creatediv = document.createElement('div');
            creatediv.innerHTML ="ADDED!";

            document.getElementsByClassName("box1").appendChild(creatediv);
        }

<div class="box1"></div>
<button class="creatediv" onclick="creatediv()">
   <i class="fa-solid fa-plus fa-xl"></i>
</button>

想要实现的是在class="box1"的 div 中添加文本ADDED!，而现在只能用id来操作，如何通过 class 实现这一点。谢谢！

- Json Prime

Answer 1

如果你想知道为什么你的特定代码片段不起作用：

getElementsByClassName返回一个数组。你需要使用索引[0]来引用它。

下面是有效的代码片段：

function creatediv() {
  const creatediv = document.createElement('div');
  creatediv.innerHTML = "ADDED!";

  document.getElementsByClassName("box1")[0].appendChild(creatediv);
}

<div class="box1"></div>
<button class="creatediv" onclick="creatediv()">
   Add<i class="fa-solid fa-plus fa-xl"></i>
</button>

- Aneesh

Answer 2

由于您使用的是 class 而不是 ID，ID 是一个唯一标识符，因此每次按其 ID 获取元素时，您总是引用页面上的一个元素。相反，如果您按类名获取元素，多个元素可能具有该类，因此您始终必须处理 DOM 元素数组。

- Masroor Hosseini

Answer 3

由于 document.getElementsByClassName("box1") 返回具有相同类名的多个元素的数组，所以它无法工作。

您可以通过以下两种方式之一解决此问题：

从数组中选择特定元素。

document.getElementsByClassName("box1")[0].appendChild(creatediv);

或者使用id选择器，例如

 document.getElementsById("box1").appendChild(creatediv);

就个人而言，我建议使用第二种方法，因为ID是唯一的。

- Faizal Hussain

Answer 4

您使用 document.getElementsbyClassName() 方法。所以这个方法获取了所有box类名并且以数组的形式将它们返回给您。因此，您应该使用 querySelector 方法，像这样：

document.querySelector(".box").appendChild(yourElement);

- alireza fazeli

Answer 5

document.getElementsByClassName 返回一个 HTMLCollection

HTMLCollection 是元素数组

document.getElementById 返回一个 Element

function creatediv() {
  const creatediv = document.createElement('div');
  creatediv.innerHTML = "ADDED!";

  document.getElementById("box1").appendChild(creatediv);
}

<div id="box1"></div>
<button class="creatediv" onclick="creatediv()">
   <i class="fa-solid fa-plus fa-xl"></i>
</button>

- kennarddh