Question

糟糕，在代码检查部分无意中问了这个= D让我们再试一次。

每次点击按钮时，我都试图在一个区域内创建一个小div。

该部分为id =“ grid”，该按钮具有一个简单的onclick =“ generateGrid（）”

我的代码：

 var div = document.createElement('div');

 function generateGrid() {

 document.getElementById("grid").appendChild(div);
}

这有效，但只有一次。我曾尝试研究答案，但似乎有些人的情况相似但更为复杂，但我无法弄清楚。

基本上，我只想单击该按钮，然后在该部分中弹出另一个div。

所以最初看起来像这样：

<section id="grid">
</section>

然后，我单击按钮后，它看起来像这样：

<section id="grid">
<div></div>
</section>

然后再次单击按钮后，它看起来像这样：

<section id="grid">
<div></div>
<div></div>
</section>

依此类推。

现在，第一次单击按钮的效果很好，但是单击之后没有任何反应。

尝试避免使用jQuery，并尽可能使用普通JS。

稍后，我计划使用循环来基于clientWidth生成div，但我开始使用简单=]

是否需要对appendChild做一些事情，还是应该完全使用其他东西？我也尝试过使用innerHTML，但无法完成该工作。

谢谢！

Answer 1

在函数内部创建div元素。

function generateGrid() {
 var div = document.createElement('div');
 document.getElementById("grid").appendChild(div);
}

<section id="grid">
a
</section>
<button onclick="generateGrid()">click</button>

Answer 2

这是因为，当您在函数外部创建div时，div是同一个节点，无论您调用该函数多少次，都无法将同一个节点添加到同一个父对象中次。描述here几乎是一个类似的问题。当您在函数内部创建div时，它将创建一个新节点，该节点将被添加到父节点中

function generateGrid() {
  var div = document.createElement('div');
  var nodeTxt = document.createTextNode('Div');
  div.appendChild(nodeTxt);

  document.getElementById("grid").appendChild(div);
}

<section id="grid"></section>
<button type='button' onclick='generateGrid()'> Click</button>

想要多次使用appendChild

2 个答案: