如何修复 appendChild() 以创建 div 元素节点？

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>

我从中得到了两个解决问题的要点。

textContent - 但我对要创建的 class 'content' 使用固定高度和固定宽度，因此我认为添加文本内容是不必要的。仍然，添加文本内容不起作用。
addEventListener() 也不起作用。

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

document.body.appendChild(btn);

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

current demonstration

Answer 1

找到的元素 Document interface called getElementByClass. It should be document.getElementsByClassName() which returns 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

函数调用：getElementsByClassName() 和 returns 列表。在您的情况下，您需要获取该列表的第一个元素才能获得 div ：

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

Answer 3

如果您有多个相同的元素 class，那么您有一个数组可以遍历它们。

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

这将追加到所有这些，如果你只想追加到一个，然后想办法遍历它们直到满足条件。

如何修复 appendChild() 以创建 div 元素节点？

How can I fix appendChild() to create a div element node?

javascript

createelement