Question

我已经编写了一个代码，该代码将通过单击一个按钮来创建一个新的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中获得了两个要点来解决问题。

textContent-但是我为要创建的类“ content”使用了固定的高度和固定的宽度，因此我认为没有必要添加文本内容。但是，添加文本内容仍然无效。
addEventListener（）也不起作用。

我希望，通过单击按钮，将添加一个“ div”元素，并且一个框在视觉上会增加。单击按钮后，将创建“ div”元素，但appendChild（）无法正常工作。 appendChild（）仅适用于以下代码行-

document.body.appendChild(btn);

代码很简单，但我不理解其中的问题。

current demonstration

Answer 1

Document接口中没有名为getElementByClass的成员函数。应该是document.getElementsByClassName()，它返回HTMLCollection个找到的元素，而不是单个元素。

相反，您可以使用document.querySelector()作为波纹管，也可以使用document.getElementsByClassName('auto-grid')[0]从集合中获取第一个元素。

function addBox1() {
  var btn = document.createElement("div");
  alert('successfull click');
  btn.setAttribute("class", "content");
  document.querySelector('.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>

Answer 2

如果同一类中有多个元素，则需要一个数组来迭代它们。

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

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

Answer 3

该函数称为：getElementsByClassName（）并返回一个列表。就您而言，您需要获取该列表的第一个元素才能获取div：

document.getElementsByClassName('auto-grid')[0].appendChild(btn);

如何修复appendChild（）创建div元素节点？

3 个答案: