javascript - 如何修复appendChild()来创建div元素节点？

Question

这个问题已经有答案了:

"document.getElementByClass is not a function" (12 个回答)

已关闭 4 年前。

我编写了一段代码，该代码将通过单击按钮创建一个新的 div 元素，但它不起作用。

function addBox1() {
  var btn = document.createElement("div");
  alert('successfull click');
  btn.setAttribute("class", "content");
  document.getElementByClass('auto-grid').appendChild(btn);
}

.auto-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  padding: 20px;
  border: 1px solid black;
}

.auto-grid div {
  min-height: 200px;
  border: 2px solid red;
}

<button type='button' class='box1' onclick='addBox1()'>Add box</button>
<div class='auto-grid'>
  <div class='content'> </div>
</div>

从中我得到了解决问题的两个关键点link .

1. textContent 必须插入 - 但我对要创建的类“内容”使用固定高度和固定宽度，因此我认为添加文本内容是不必要的。尽管如此，添加文本内容还是不起作用。
2. addEventListener() 也不起作用。

我预计，通过单击按钮，将添加一个“div”元素，并且一个框将在视觉上增加。单击按钮后，将创建“div”元素，但appendChild() 不起作用。 appendChild() 仅适用于以下代码行 -

document.body.appendChild(btn);

代码很简单，但我不明白其中的问题。

current demonstration

Answer 1

如果同一类有多个元素，则可以使用一个数组来迭代它们。

var aGrids=document.querySelectorAll('.auto-grid');
    for(var i=0;i<aGrids.length;i++){
    aGrids[i].appendChild(btn);
}

这将附加到所有这些，如果您只想附加到一个，然后找到迭代它们的方法，直到满足条件。